/* ApiceSoft · "Como as peças se ligam": diagrama vivo do fluxo dos agentes.
   Componente isolado: bloco <!-- pecas:inicio/fim --> do index.html + assets/pecas.js.
   Sem JS: peças e passos visíveis, sem linhas. Com movimento reduzido: linhas e setas
   paradas, todos os passos acesos. Anima só transform e opacity. */
.pc{margin:0;padding:18px 16px 16px;container-type:inline-size}
.pc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px}
.pc .eco-note{position:static}
.pc-pause{font:600 11.5px Inter,sans-serif;color:#52616A;background:#fff;border:1px solid #DCE9E1;border-radius:999px;padding:5px 11px;cursor:pointer;min-height:28px}
.pc-pause:hover{color:#08783C;border-color:#9FD3B4}
.pc-pause:focus-visible,.pc-node:focus-visible{outline:2px solid #169B52;outline-offset:2px}

/* Palco: grade das peças + SVG por baixo com as ligações (traçadas pelo JS) */
.pc-stage{position:relative;display:grid;grid-template-columns:1.25fr 1fr;grid-template-areas:"sis sis" "ag tl" "eq eq";gap:44px 30px;padding:16px 0 14px 30px;margin-top:4px}
@container (min-width:430px){
 .pc-stage{grid-template-columns:1fr 1fr;grid-template-areas:"sis tl" "ag ag" "eq eq";gap:48px 40px;padding:18px 6px 14px 30px}
 .pc-stage [data-node=ag],.pc-stage [data-node=eq]{justify-self:center;width:min(62%,250px)}
}
.pc-stage [data-node=sis]{grid-area:sis}.pc-stage [data-node=tl]{grid-area:tl}.pc-stage [data-node=ag]{grid-area:ag}.pc-stage [data-node=eq]{grid-area:eq}
.pc-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.pc-edge{fill:none;stroke:#BFDCCB;stroke-width:2;stroke-linecap:round;stroke-dasharray:4 5;marker-end:url(#pc-seta);transition:stroke .3s,opacity .3s,stroke-width .3s}
.pc-edge[data-edge=e2]{marker-start:url(#pc-seta)}
.pc-lines marker path{fill:#8CC4A3}
.pc-edge.is-flow,.pc-edge.is-hl{stroke:#169B52;stroke-dasharray:none;stroke-width:2.4}
.pc-stage.has-focus .pc-edge:not(.is-hl){opacity:.25}

/* Peças */
.pc-node{position:relative;z-index:1;display:grid;grid-template-columns:24px 1fr;column-gap:9px;align-items:center;text-align:left;width:100%;min-height:62px;padding:11px 12px;font:inherit;color:#15242C;background:#fff;border:1.2px solid #D7E4DD;border-radius:14px;cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s,opacity .3s;-webkit-tap-highlight-color:transparent}
.pc-node img{grid-row:span 2;width:22px;height:22px}
.pc-t{font:600 13px/1.25 Inter,sans-serif}
.pc-s{font:400 11px/1.3 Inter,sans-serif;color:#52616A}
.pc-core{background:#0B1F2A;border-color:#0B1F2A;color:#fff}
.pc-core img{filter:brightness(0) invert(1)}
.pc-core .pc-s{color:#A9C2B6}
.pc-node:hover,.pc-node.is-sel{border-color:#169B52;box-shadow:0 10px 24px rgba(8,120,60,.12)}
.pc-core:hover,.pc-core.is-sel{border-color:#35D66A}
.pc-stage.has-focus .pc-node:not(.is-sel):not(.is-rel){opacity:.55}
.pc-node.is-hit{animation:pc-hit .5s cubic-bezier(.2,.8,.2,1)}
@keyframes pc-hit{40%{transform:scale(1.04)}}

/* O agente "pensa": anel que pulsa + três pontos */
.pc-core::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:2px solid #35D66A;opacity:0;pointer-events:none}
.pc-core.is-thinking::after{animation:pc-ring 1s ease-out infinite}
@keyframes pc-ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.12)}}
.pc-think{position:absolute;right:11px;top:9px;display:flex;gap:3px;opacity:0;transition:opacity .2s}
.pc-think i{width:4px;height:4px;border-radius:50%;background:#35D66A}
.pc-core.is-thinking .pc-think{opacity:1}
.pc-core.is-thinking .pc-think i{animation:pc-dot .9s ease-in-out infinite}
.pc-think i:nth-child(2){animation-delay:.15s!important}.pc-think i:nth-child(3){animation-delay:.3s!important}
@keyframes pc-dot{50%{opacity:.25;transform:translateY(-2px)}}

/* Selo de conferência na equipe */
.pc-seal{position:absolute;right:-6px;top:-11px;font:700 10.5px Inter,sans-serif;color:#fff;background:#169B52;border-radius:999px;padding:3px 8px;box-shadow:0 4px 12px rgba(8,120,60,.25);opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.pc-node.is-checked .pc-seal{opacity:1;transform:none}

/* Cartões de tarefa que percorrem as linhas */
.pc-card{position:absolute;left:0;top:0;z-index:2;pointer-events:none;white-space:nowrap;font:600 10.5px/1 Inter,sans-serif;color:#0B1F2A;background:#fff;border:1px solid #9FD3B4;border-radius:7px;padding:5px 7px 5px 18px;box-shadow:0 6px 16px rgba(11,31,42,.12);opacity:0;will-change:transform,opacity}
.pc-card::before{content:"";position:absolute;left:7px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#169B52}
.pc-card.is-ok{background:#E5F7ED;color:#08783C}

/* Texto: o que acontece na peça + passos em sequência */
.pc-info{margin:6px 0 10px;min-height:2.6em;font-size:13px;line-height:1.4;color:#15242C}
.pc-info b{color:#08783C}
.pc-steps{list-style:none;counter-reset:pc;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pc-steps li{counter-increment:pc;position:relative;font-size:11.5px;line-height:1.3;color:#52616A;background:rgba(255,255,255,.7);border:1px solid #E1ECE5;border-radius:10px;padding:7px 8px 7px 30px;transition:color .3s,border-color .3s,background .3s,opacity .3s}
.pc-steps li::before{content:counter(pc);position:absolute;left:8px;top:6px;width:16px;height:16px;border-radius:50%;font:700 10px/16px Inter,sans-serif;text-align:center;color:#08783C;background:#E5F7ED;transition:background .3s,color .3s}
.pc.is-live .pc-steps li.is-on,.pc:not(.is-live) .pc-steps li{color:#15242C;border-color:#BFE3CD;background:#fff}
.pc.is-live .pc-steps li:not(.is-on){opacity:.6}
.pc.is-live .pc-steps li.is-on::before{background:#169B52;color:#fff}
.pc-note{margin-top:9px;font-size:10.5px;color:#63736A}
@container (max-width:340px){.pc-steps{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
 .pc-node,.pc-edge,.pc-steps li,.pc-seal{transition:none}
 .pc-node.is-hit,.pc-core.is-thinking::after,.pc-core.is-thinking .pc-think i{animation:none}
 .pc-card{display:none}
}