/* Tecela AI · visual do hero de "Dados e integrações" (/servicos/dados-e-integracoes).
   Prefixo .dpl- para não colidir com outros visuais de página de serviço. Carregado só nesta página. */

.dpl-pipeline {display:flex;flex-direction:column}

.dpl-sources {display:flex;gap:8px;flex-wrap:wrap}
.dpl-chip {flex:1 1 76px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);border-radius:10px;background:var(--bg-2);padding:10px 8px;font:600 12px var(--font-mono);letter-spacing:.02em;color:var(--fg-2);text-align:center;white-space:nowrap}
.dpl-chip-dot {width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

.dpl-flow {position:relative;height:26px;width:100%;max-width:120px;align-self:center}
.dpl-flow::before {content:"";position:absolute;left:50%;top:0;bottom:5px;width:1.5px;background:var(--border);transform:translateX(-50%)}
.dpl-flow::after {content:"";position:absolute;left:50%;bottom:2px;width:6px;height:6px;border-right:1.5px solid var(--border);border-bottom:1.5px solid var(--border);transform:translateX(-50%) rotate(45deg)}
.dpl-rec {position:absolute;left:50%;top:0;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--accent-2);opacity:0}
.dpl-flow-in .dpl-rec:nth-child(1) {margin-left:-15px}
.dpl-flow-in .dpl-rec:nth-child(3) {margin-left:9px}
.dpl-flow-out .dpl-rec:nth-child(1) {margin-left:-9px}
.dpl-flow-out .dpl-rec:nth-child(2) {margin-left:3px}

.dpl-base {border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--accent) 8%,var(--bg-2));padding:14px 16px}
.dpl-base-head {display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.dpl-base-name {font:600 13px var(--font-sans);color:var(--fg)}
.dpl-tag {font:600 9.5px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2);border:1px solid color-mix(in srgb,var(--accent-2) 45%,var(--border));border-radius:99px;padding:3px 9px;white-space:nowrap}
.dpl-rows {display:grid;gap:7px}
.dpl-row {display:grid;grid-template-columns:1fr .8fr .5fr;gap:7px}
.dpl-row span {height:8px;border-radius:4px;background:color-mix(in srgb,var(--fg) 14%,transparent)}
.dpl-row:nth-child(2) span:last-child {opacity:.55}
.dpl-row:nth-child(3) span:nth-child(2) {opacity:.7}

.dpl-panel {border:1px solid var(--border);border-radius:12px;background:var(--bg-2);padding:14px 16px}
.dpl-panel-head {font:600 10.5px var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.dpl-bars {display:flex;align-items:flex-end;gap:8px;height:58px}
.dpl-bars i {flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 35%,transparent));height:var(--h);font-style:normal}

/* Sem movimento: pipeline completo e parado. Com movimento: registros percorrem os conectores num ciclo de 2.6s. */
@media(prefers-reduced-motion:no-preference) {
  .dpl-rec {animation:dpl-travel 2.6s ease-in-out infinite;animation-delay:calc(var(--d) * .4s)}
}
@keyframes dpl-travel {0%,4% {top:0%;opacity:0} 14% {opacity:1} 78% {opacity:1} 92%,100% {top:88%;opacity:0}}

@media(max-width:600px) {
  .dpl-chip {flex:1 1 64px;font-size:11px;padding:8px 6px}
  .dpl-bars {height:46px}
}