/* O grafo do portal: a linguagem do showcase («Como Construímos», 05–06/10) num motor que monta o grafo sozinho. Os nós
   entram vindos do fundo, as ligações desenham-se, os dados circulam; as voltas são douradas e tracejadas; a aprovação
   humana tem o anel laranja. As posições vêm do motor (grafo.js), não estão escritas à mão. */
.fg-cena { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 35%; overflow: hidden; }
.fg-plano { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; transform: translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px)) scale(var(--escala, 1)) rotateX(var(--rx, 12deg)) rotateY(var(--ry, -2deg)) rotateZ(-.6deg); transition: transform .9s cubic-bezier(.2, .8, .2, 1), width .7s cubic-bezier(.2, .8, .2, 1), height .7s cubic-bezier(.2, .8, .2, 1); }
.fg-plano.plano-2d { --rx: 0deg; --ry: 0deg; transform: translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px)) scale(var(--escala, 1)); }
.fg-plano::before { content: ''; position: absolute; inset: -14% -10%; transform: translateZ(-40px); background: radial-gradient(rgb(255 255 255 / 15%) 1px, transparent 1.4px) 0 0 / 22px 22px; -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%); pointer-events: none; }
/* À mão (09/10): arrastar, zoom e o botão de enquadrar. Durante o arrasto o plano segue o dedo sem transição. */
.fg-cena { touch-action: none; cursor: grab; }
.fg-plano, .fg-nos { pointer-events: none; } /* só os nós apanham o rato: o resto do plano inclinado tapava os da ponta */
.fg-no:not(.t-sub) { pointer-events: auto; }
.fg-arrastar .fg-no:not(.t-sub) { pointer-events: none; }
.fg-arrastar .fg-cena { cursor: grabbing; }
.fg-a-mao .fg-plano { transition: transform .16s ease-out, width .7s cubic-bezier(.2, .8, .2, 1), height .7s cubic-bezier(.2, .8, .2, 1); }
.fg-arrastar .fg-plano { transition: none; }
.fg-zoom { position: absolute; right: 14px; bottom: 14px; z-index: 4; display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: var(--r); background: rgb(10 11 14 / 92%); overflow: hidden; }
.fg-zoom button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; color: var(--ink-2); transition: background-color .16s, color .16s; }
.fg-zoom button + button { border-top: 1px solid var(--line); }
.fg-zoom button:hover { background: var(--hover); color: var(--ink); }
.fg-zoom svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fg-zoom-enq { color: var(--ink-3); }
/* Há mais grafo para um dos lados (um grafo comprido não encolhe abaixo do que se lê): um esbatido nesse lado */
.fg-mais-esq::before, .fg-mais-dir::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 3; width: 56px; pointer-events: none; }
.fg-mais-esq::before { left: 0; background: linear-gradient(to right, var(--deep), transparent); }
.fg-mais-dir::after { right: 0; background: linear-gradient(to left, var(--deep), transparent); }
.fg-a-mao .fg-zoom-enq { color: var(--accent); }
@media (pointer: coarse) { .fg-zoom button { width: 42px; height: 42px; } }
.fg-fios { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(0); pointer-events: none; }
.fg-fios path { fill: none; stroke: rgb(255 255 255 / 14%); stroke-width: 1.5; }
.fg-fios path.viva { stroke: #FF9A57; stroke-width: 2; filter: drop-shadow(0 0 5px rgb(255 138 61 / 40%)); }
.fg-fios path.t-volta { stroke-dasharray: 7 7; }
.fg-fios path.t-volta.viva { stroke: var(--gold, #C9A23A); filter: drop-shadow(0 0 5px rgb(201 162 58 / 45%)); }
.fg-fios path.t-sub.viva { stroke: rgb(255 255 255 / 28%); stroke-width: 1.2; stroke-dasharray: 3 5; filter: none; }
.fg-fios path.sai { opacity: 0 !important; transition: opacity .4s; }
.fg-fios circle { fill: #FFE6D2; filter: drop-shadow(0 0 5px #FF8A3D); }
.fg-fios circle.volta { fill: #F7E2A8; filter: drop-shadow(0 0 5px #C9A23A); }
.fg-rotulo rect { fill: #0D0F14; stroke: rgb(255 138 61 / 62%); stroke-width: 1; }
.fg-rotulo text { font: 600 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; fill: #FFB27D; }
.fg-rotulo.t-volta rect { stroke: rgb(201 162 58 / 75%); }
.fg-rotulo.t-volta text { fill: #EBCF7C; }
.fg-rotulo { transition: opacity .5s .3s; }

.fg-no { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -31px) translateZ(var(--z, 0px)) scale(var(--s, 1)); transform-style: preserve-3d; opacity: 0; transition: opacity .6s ease, transform .8s cubic-bezier(.2, .9, .2, 1.1); cursor: pointer; }
.fg-no.t-agente { transform: translate(-50%, -33px) translateZ(var(--z, 0px)) scale(var(--s, 1)); }
.fg-no.t-sub { transform: translate(-50%, -20px) translateZ(var(--z, 0px)) scale(var(--s, 1)); cursor: default; }
.fg-no.dentro { opacity: 1; --z: 22px; --s: 1; }
.fg-no.fora { --z: -220px; --s: .8; }
.fg-no.sai { opacity: 0; --z: -120px; --s: .85; }
.fg-no:focus-visible { outline: none; }
.fg-no:focus-visible .fg-caixa { outline: 2px solid var(--accent); outline-offset: 4px; }
.fg-caixa { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border: 1.5px solid rgb(255 255 255 / 26%); border-radius: 12px; background: linear-gradient(160deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 1%) 45%), #11131A; box-shadow: 0 24px 50px -24px rgb(0 0 0 / 90%); transition: border-color .4s, box-shadow .4s; }
.t-gatilho .fg-caixa { border-radius: 31px 12px 12px 31px; }
.t-fim .fg-caixa { border-radius: 12px 31px 31px 12px; }
.t-agente .fg-caixa { width: 200px; height: 66px; grid-template-columns: 38px minmax(0, 1fr); justify-items: start; gap: 10px; padding: 0 14px; }
.t-sub .fg-caixa { width: 40px; height: 40px; border-radius: 50%; border-style: dashed; }
.t-se .fg-caixa::before { content: ''; position: absolute; inset: 7px; border: 1px dashed rgb(255 255 255 / 12%); border-radius: 8px; transform: rotate(45deg) scale(.82); }
.t-humano .fg-caixa { border-style: dashed; }
.fg-ic { display: grid; place-items: center; width: 34px; height: 34px; color: var(--cor, var(--accent)); }
.t-sub .fg-ic { width: 22px; height: 22px; }
.fg-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.t-sub .fg-ic svg { width: 15px; height: 15px; }
.fg-dentro { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: left; }
.fg-dentro b { font: 600 13px/1.2 var(--sans); color: var(--ink); }
.fg-dentro small { font: 500 11px/1.2 var(--mono); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.fg-porta { position: absolute; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / 26%); background: #0B0C10; transition: border-color .4s, background-color .4s; }
.fg-porta.in { left: -5.5px; top: 50%; margin-top: -4.5px; } .fg-porta.out { right: -5.5px; top: 50%; margin-top: -4.5px; }
.vertical .fg-porta.in { left: 50%; top: -5.5px; margin: 0 0 0 -4.5px; } .vertical .fg-porta.out { left: 50%; right: auto; top: auto; bottom: -5.5px; margin: 0 0 0 -4.5px; }
.fg-no.dentro .fg-porta { border-color: color-mix(in srgb, var(--cor) 70%, transparent); }
.fg-no.feito .fg-porta, .fg-no.aprovado .fg-porta { background: var(--cor); }
.fg-rot { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 122px; margin-top: 9px; text-align: center; }
.t-sub .fg-rot { width: 104px; margin-top: 5px; }
/* O nome por cima das linhas: um fundo da cor do palco, para a linha que passa por baixo não o riscar (09/10) */
.fg-rot b, .fg-rot small { padding: 0 4px; border-radius: 3px; background: rgb(8 9 12 / 82%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fg-rot b { font: 600 13px/1.25 var(--sans); color: var(--ink); }
.fg-rot small { font: 500 11px/1.3 var(--mono); color: var(--ink-3); }
.t-sub .fg-rot b { font: 500 11px/1.2 var(--mono); letter-spacing: .02em; color: var(--ink-2); }
.t-sub .fg-rot small { font-size: 11px; }
.fg-estado { position: absolute; left: 50%; top: -24px; transform: translateX(-50%); height: 18px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 9px; border: 1px solid var(--line-2); background: #0D0F14; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.fg-no.correr .fg-caixa { border-color: var(--cor); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cor) 45%, transparent), 0 0 34px -6px var(--cor), 0 24px 50px -24px rgb(0 0 0 / 90%); }
.fg-no.correr .fg-ic { animation: fg-pulso 1.4s ease-in-out infinite; }
.fg-no.correr .fg-estado { color: var(--accent); border-color: var(--accent-line); }
@keyframes fg-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); filter: drop-shadow(0 0 8px var(--cor)); } }
.fg-no.feito .fg-caixa { border-color: color-mix(in srgb, var(--cor) 60%, rgb(255 255 255 / 20%)); }
.fg-no.mudou .fg-caixa { animation: fg-mudou 1.2s ease-out 1; }
@keyframes fg-mudou { 0% { box-shadow: 0 0 0 2px var(--accent), 0 0 40px -4px var(--accent); } 100% { box-shadow: 0 24px 50px -24px rgb(0 0 0 / 90%); } }
.fg-no.focado .fg-caixa { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-line), 0 0 44px -6px var(--accent); }
.fg-no-anel { position: absolute; inset: -8px; border-radius: 16px; pointer-events: none; opacity: 0; background: conic-gradient(var(--accent) var(--anel, 0%), transparent 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); padding: 2px; }
.fg-no.esperar .fg-no-anel { opacity: 1; animation: fg-anel 2.4s linear infinite; }
.fg-no.esperar .fg-caixa { border-color: var(--accent); }
.fg-no.esperar .fg-estado { color: var(--accent); border-color: var(--accent-line); animation: fg-piscar 1.2s ease-in-out infinite; }
@property --anel { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes fg-anel { from { --anel: 0%; } to { --anel: 100%; } }
@keyframes fg-piscar { 50% { opacity: .45; } }
.fg-no.aprovado .fg-caixa { border-color: var(--green); animation: fg-carimbo .5s cubic-bezier(.2, .9, .2, 1.3); }
.fg-no.aprovado .fg-estado { color: var(--green-t); border-color: rgb(101 166 7 / 55%); }
@keyframes fg-carimbo { from { transform: scale(1.2); } to { transform: scale(1); } }
.fg-no.t-fim.aprovado .fg-caixa { box-shadow: 0 0 0 1px rgb(101 166 7 / 40%), 0 0 60px -6px rgb(101 166 7 / 60%); }
.fg-no.t-fim.aprovado::after { content: ''; position: absolute; left: 50%; top: 31px; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; border: 1px solid var(--green); animation: fg-onda 1.6s ease-out 2; pointer-events: none; }
@keyframes fg-onda { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.fg-fase { position: absolute; transform: translate(-50%, 0) translateZ(4px); padding: 0 8px; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; opacity: 0; transition: opacity .6s, left .7s cubic-bezier(.2, .8, .2, 1), top .7s cubic-bezier(.2, .8, .2, 1); }
.fg-fase.dentro { opacity: 1; }
.fg-fase { padding: 2px 8px; border-radius: 3px; background: rgb(8 9 12 / 82%); }
.fg-fase::before { content: ''; display: inline-block; width: 18px; height: 1px; margin-right: 8px; vertical-align: 3px; background: var(--line-3); }

/* A Tabela de Saída no desenho (29/10/2026): um cartão com a grelha por trás, ligado a tracejado azul aos passos de onde vem */
.fg-no.t-tabela { transform: translate(-50%, -32px) translateZ(var(--z, 0px)) scale(var(--s, 1)); }
.t-tabela .fg-caixa { width: 200px; height: 64px; grid-template-columns: 30px minmax(0, 1fr); justify-items: start; gap: 8px; padding: 0 12px; border-radius: 6px; border-color: rgb(141 182 245 / 45%); background: linear-gradient(rgb(141 182 245 / 9%) 0 15px, transparent 15px), repeating-linear-gradient(90deg, transparent 0 43px, rgb(141 182 245 / 7%) 43px 44px), #10131B; }
.t-tabela .fg-ic { width: 30px; height: 30px; }
.t-tabela .fg-ic svg { width: 22px; height: 22px; }
.t-tabela .fg-dentro { gap: 2px; }
.t-tabela .fg-dentro em { font: 600 11px/1 var(--mono); font-style: normal; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; color: #8DB6F5; }
.t-tabela .fg-dentro b { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-tabela .fg-dentro small { max-width: 140px; }
.t-tabela .fg-porta.in { left: 50%; top: -5.5px; margin: 0 0 0 -4.5px; }
.vertical .t-tabela .fg-porta.in { left: auto; right: -5.5px; top: 50%; margin: -4.5px 0 0; }
.fg-fios path.t-dados, .fg-fios path.t-dados.viva { stroke: rgb(141 182 245 / 55%); stroke-width: 1.4; stroke-dasharray: 4 5; filter: none; }

/* O Formulário e a Página no desenho (30/10/2026): uma pré-visualização simples, ligada a tracejado ao passo que os tem. O
   formulário mostra os rótulos e os campos vazios; a página, o esboço do menu, dos cartões e das colunas. Só para ver. */
.fg-no.t-formulario, .fg-no.t-pagina { transform: translate(-50%, -72px) translateZ(var(--z, 0px)) scale(var(--s, 1)); }
.t-formulario .fg-caixa, .t-pagina .fg-caixa { display: block; place-items: normal; width: 200px; height: 144px; padding: 10px 12px; border-radius: 6px; border-color: color-mix(in srgb, var(--cor) 45%, transparent); background: linear-gradient(color-mix(in srgb, var(--cor) 8%, transparent) 0 40px, transparent 40px), #10131B; }
.t-formulario .fg-porta.in, .t-pagina .fg-porta.in { left: 50%; top: -5.5px; margin: 0 0 0 -4.5px; }
.vertical .t-formulario .fg-porta.in, .vertical .t-pagina .fg-porta.in { left: auto; right: -5.5px; top: 50%; margin: -4.5px 0 0; }
.fg-previa { width: 100%; gap: 2px; height: 100%; overflow: hidden; }   /* a largura toda da caixa (sem o centrar da caixa dos passos) */
.fg-previa > em { font: 600 11px/1.2 var(--mono); font-style: normal; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; color: var(--cor); }
.fg-previa > b { max-width: 176px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-previa small { max-width: none; }
.fg-campos { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; min-width: 0; }
.fg-campo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fg-campo small, .fg-campos > small { font: 500 11px/1.2 var(--mono); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-campo small i { font-style: normal; color: var(--cor); }
.fg-vazio { position: relative; display: block; height: 14px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 3px; background: rgb(255 255 255 / 3%); }
.c-escolha .fg-vazio::after { content: ''; position: absolute; right: 6px; top: 3px; width: 4px; height: 4px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); }
.c-sim_nao .fg-vazio { width: 26px; border-radius: 7px; }
.c-sim_nao .fg-vazio::after { content: ''; position: absolute; left: 2px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.c-data .fg-vazio::after { content: ''; position: absolute; right: 5px; top: 3px; width: 7px; height: 5px; border: 1px solid var(--ink-3); border-top-width: 2px; border-radius: 1px; }
.fg-tela { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 4px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 4px; background: rgb(255 255 255 / 2%); min-width: 0; }
.fg-menu { display: flex; align-items: center; gap: 6px; min-width: 0; height: 18px; padding-bottom: 4px; border-bottom: 1px solid rgb(255 255 255 / 10%); overflow: hidden; }
.fg-marca { flex: none; width: 10px; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--cor) 60%, transparent); }
.fg-menu small { flex: 0 1 auto; min-width: 0; font: 500 11px/1 var(--mono); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-sec { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; height: 24px; min-width: 0; }
.fg-item { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; padding: 0 4px; }
.s-cartoes .fg-item { border: 1px solid rgb(255 255 255 / 16%); border-radius: 3px; background: rgb(255 255 255 / 3%); }
.s-colunas .fg-item + .fg-item { border-left: 1px solid rgb(255 255 255 / 12%); }
.fg-item small { font: 500 11px/1 var(--mono); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-linha { display: block; width: 70%; height: 3px; border-radius: 2px; background: rgb(255 255 255 / 12%); }
.fg-tela > small { font: 500 11px/1 var(--mono); color: var(--ink-3); }

/* O cartão de um nó, ao clicar */
.cartao-no { position: absolute; right: 14px; top: 14px; width: min(320px, calc(100% - 28px)); max-height: calc(100% - 28px); overflow: auto; padding: 16px 18px; border: 1px solid var(--line-2); border-top: 2px solid var(--cor, var(--accent)); border-radius: 6px; background: rgb(13 15 20 / 97%); box-shadow: 0 24px 60px rgb(0 0 0 / 55%); z-index: 5; animation: entrar .24s var(--ease) both; }
.cartao-no .rot { color: var(--cor, var(--accent)); }
.cartao-no h4 { margin: 0 0 12px; font: 600 16px/1.3 var(--sans); }
.cartao-no dl { display: grid; gap: 10px; margin: 0; }
.cartao-no dt { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cartao-no dd { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink); }
.cartao-no dd.por-definir { color: var(--gold-t, var(--gold)); font: 500 12px/1.5 var(--mono); letter-spacing: .04em; }
.cartao-no .ferr { display: inline-flex; align-items: center; gap: 6px; margin: 2px 6px 2px 0; padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 3px; font: 500 11px/1.6 var(--mono); }
.cartao-no .ferr em { font-style: normal; color: var(--ink-3); }
.cartao-no .ferr.sugerido { border-style: dashed; }
.cartao-no .fechar { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--r); background: transparent; color: var(--ink-3); }
.cartao-no .fechar svg { width: 14px; height: 14px; }
.cartao-no .fechar:hover { color: var(--ink); background: var(--hover); }

@media (prefers-reduced-motion: reduce) {
  .fg-no, .fg-plano, .fg-fase { transition: none; }
  .fg-no.correr .fg-ic, .fg-no.esperar .fg-no-anel, .fg-no.esperar .fg-estado, .fg-no.aprovado .fg-caixa, .fg-no.t-fim.aprovado::after, .fg-no.mudou .fg-caixa { animation: none; }
}

/* Portal: repor um grafo guardado sem animação */
.fg-instante .fg-no, .fg-instante .fg-plano, .fg-instante .fg-fase, .fg-instante .fg-rotulo { transition: none !important; }
.fg-instante .fg-no .fg-caixa { animation: none !important; }