/*
 * "Como funciona" diagram (tecnico/funcionamento.html). Maps flow tokens to commerce-vc1 kit/site vars.
 * Without JS the zones, nodes and the step lists stay readable; flow.js draws the SVG links.
 */

:root{
  --fx-web:#0757A6;--fx-fila:#117C52;--fx-dados:#776000;--fx-ext:#A35200;--fx-ops:#464943;--fx-seg:#B42318;--fx-bkp:#6B7066;
  --ink-900:var(--preto);--ink-800:var(--grafite);--ink-700:var(--texto-2);--ink-600:var(--texto-2);
  --ink-300:var(--linha);--ink-200:var(--linha);--ink-100:var(--fundo-2);
  --cream-50:var(--fundo-2);--yellow-50:var(--lima-claro);--yellow-200:var(--lima);--yellow-500:var(--lima);
  --success-bg:var(--verde-claro);--success-fg:var(--verde);
  --info-bg:var(--azul-claro);--info-fg:var(--azul);
  --warning-bg:var(--ambar-claro);--warning-fg:var(--ambar);
  --font-sans:Inter,"Segoe UI",system-ui,sans-serif;
  --font-mono:ui-monospace,Menlo,monospace;
  --top-h:53px;--shadow-xs:var(--shadow);--radius-lg:var(--radius);
}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.page.page--wide{max-width:1380px}

.fx-legend{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:13px;color:var(--ink-700)}
.fx-legend > b{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-600)}
.fx-legend span{display:inline-flex;align-items:center;gap:6px}
.fx-line{display:inline-block;width:26px;height:0;border-top:3px solid currentColor}
.fx-line.dashed{border-top-style:dashed}

.t-web{color:#0757A6}
.t-fila{color:#117C52}
.t-dados{color:#776000}
.t-ext{color:#A35200}
.t-ops{color:#464943}
.t-seg{color:#B42318}
.t-bkp{color:#6B7066}

.fx-st{display:inline-block;margin-top:6px;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:800;line-height:17px;white-space:nowrap}
.st-ok{background:var(--success-bg);color:var(--success-fg)}
.st-skel{background:var(--info-bg);color:var(--info-fg)}
.st-design{background:var(--ink-100);color:var(--ink-700)}
.st-conf{border:1px dashed var(--warning-fg);background:var(--warning-bg);color:var(--warning-fg)}

.fx-tools{position:sticky;top:calc(var(--top-h) + 6px);z-index:20;display:grid;gap:10px;padding:12px 14px;background:rgb(255 254 250 / .96);border:1px solid var(--ink-200);border-radius:var(--radius);box-shadow:var(--shadow-xs)}
.fx-tools[hidden]{display:none}
.fx-tabs,.fx-ctrl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fx-tabs .chip[aria-pressed="true"]{background:var(--ink-900);border-color:var(--ink-900);color:var(--yellow-500)}
.fx-ctrl button{padding:5px 12px;border:1px solid var(--ink-300);border-radius:var(--radius-sm);background:#fff;font:700 13px/1.2 var(--font-sans);color:var(--ink-900);cursor:pointer}
.fx-ctrl button:hover{border-color:var(--ink-900)}
.fx-ctrl button:disabled{opacity:.45;cursor:default}
.fx-caption{flex:1;min-width:240px;margin:0;font-size:14px;line-height:1.45;color:var(--ink-800)}
.fx-caption b{color:var(--ink-900)}

.fx-stage{position:relative;display:grid;gap:14px;padding:16px;background:var(--cream-50);border:1px solid var(--ink-200);border-radius:var(--radius-lg);box-shadow:var(--shadow);
  grid-template-columns:minmax(140px,.8fr) minmax(0,3.4fr) minmax(170px,1fr);
  grid-template-areas:"users core ext" "ops ops ops"}
.fx-core{grid-area:core;display:grid;gap:12px}
.fx-users{grid-area:users}
.fx-ext{grid-area:ext}
.fx-ops{grid-area:ops}
.fx-zone{position:relative;z-index:1;padding:26px 10px 10px;background:#fff;border:1px solid var(--ink-200);border-radius:var(--radius)}
.fx-zone > h3{position:absolute;top:7px;left:12px;margin:0;font:900 10.5px/1 var(--font-sans);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-600)}
.fx-zone.zone-data{background:var(--yellow-50);border-color:var(--yellow-200)}
.fx-zone.zone-ext{background:#FFF8EE;border-color:#F2D3AE}
.fx-zone.zone-ops{background:var(--ink-100)}
.fx-nodes{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.fx-users .fx-nodes,.fx-ext .fx-nodes{grid-template-columns:1fr}
.fx-ops .fx-nodes{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}

.fx-node{position:relative;padding:9px 10px 8px;background:#fff;border:1px solid var(--ink-200);border-left:4px solid var(--ink-900);border-radius:var(--radius-sm);font-size:12px;line-height:1.4;color:var(--ink-700);transition:opacity .2s,box-shadow .2s}
.fx-node > b{display:block;font:800 13px/1.3 var(--font-mono);color:var(--ink-900)}
.fx-node.k-worker{border-left-color:#117C52}
.fx-node.k-state{border-left-color:#0757A6}
.fx-node.k-data{border-left-color:#776000}
.fx-node.k-ext{border-left-color:#A35200}
.fx-node.k-ops{border-left-color:#6B7066}
.fx-node.k-sec{border-left-color:#B42318}
.fx-node.k-user{border-left-color:var(--yellow-500)}
.fx-users .fx-node.k-user{min-height:120px}
.fx-node.on,.fx-zone.on{box-shadow:0 0 0 3px var(--yellow-500)}
.fx-node[data-steps]::after{content:attr(data-steps);position:absolute;top:-9px;right:-6px;padding:0 6px;border-radius:999px;background:var(--ink-900);color:var(--yellow-500);font:800 11px/18px var(--font-sans)}

.fx-svg{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none}
.fx-edge{fill:none;stroke-width:2;opacity:.9;stroke-linecap:round}
.fx-edge.dashed{stroke-dasharray:5 5}
.fx-edge.cur{stroke-width:3.5;opacity:1}
.fx-stage.has-cur .fx-edge:not(.cur){opacity:.22}
.fx-stage.has-flow .fx-node.dim{opacity:.55}
.fx-badge circle{fill:#fff;stroke-width:2}
.fx-badge text{font:800 11px/1 var(--font-sans);fill:var(--ink-900);text-anchor:middle;dominant-baseline:central}
.fx-tip rect{fill:var(--ink-900)}
.fx-tip text{font:700 12px/1 var(--font-sans);fill:#fff;dominant-baseline:central}

@media (prefers-reduced-motion:no-preference){
  .fx-edge.cur{stroke-dasharray:7 6;animation:fx-flow .9s linear infinite}
}
@keyframes fx-flow{to{stroke-dashoffset:-13}}

.fx-flows{display:grid;gap:22px}
.fx-flow{scroll-margin-top:150px}
.fx-flow > h2{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fx-steps{display:grid;gap:6px;margin:0;padding:0;counter-reset:fx;max-width:none}
.fx-steps > li{position:relative;padding:9px 12px 9px 48px;list-style:none;background:#fff;border:1px solid var(--ink-200);border-left:4px solid currentColor;border-radius:var(--radius-sm);counter-increment:fx;font-size:14px;line-height:1.5}
.fx-steps > li > *{color:var(--ink-800)}
.fx-steps > li::before{content:counter(fx);position:absolute;left:12px;top:9px;width:24px;height:24px;border-radius:50%;background:var(--ink-900);color:var(--yellow-500);font:800 12px/24px var(--font-sans);text-align:center}
.fx-steps > li[tabindex]{cursor:pointer}
.fx-steps > li[aria-current="step"]{background:var(--yellow-50);box-shadow:0 0 0 2px var(--yellow-500)}
.fx-steps .who{font-weight:800;color:var(--ink-900)}
body.fx-js .fx-flow[hidden]{display:none}

@media (max-width:1100px){
  .fx-stage{grid-template-columns:minmax(0,1fr) minmax(170px,.42fr);grid-template-areas:"users users" "core ext" "ops ops"}
  .fx-users .fx-nodes{grid-template-columns:1fr}
  .fx-users .fx-node.k-user{min-height:0}
}
@media (max-width:760px){
  .fx-stage{grid-template-columns:1fr;grid-template-areas:"users" "core" "ext" "ops";padding:10px}
  .fx-ext .fx-nodes{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .fx-svg{display:none}
  .fx-tools{position:static}
}
@media print{
  .fx-tools{display:none}
  .fx-stage{box-shadow:none}
  body.fx-js .fx-flow[hidden]{display:block}
}