/* ==========================================================================
   TECH EFFECTS KIT — ai-agent.css
   Animación: expresión gráfica del ciclo de funcionamiento de un agente de IA
   (percibe → decide → actúa → aprende, con ramal de escalamiento a humano).

   Namespace de clases: .ag-*    ·   Namespace JS: window.AgentFX
   Módulo independiente — no depende de tech-effects.css ni de production-line.css.
   ========================================================================== */

:root{
  --ag-accent:#00E5A8;        /* pulso / nodo activo */
  --ag-accent-2:#3AA0FF;      /* "pensamiento" del nodo Decide */
  --ag-escalate:#F0C24E;      /* ramal de escalamiento a humano */
  --ag-bg:#070A10;
  --ag-line:rgba(0,229,168,0.28);
  --ag-fog:#7C8798;
  --ag-mono:'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

.ag-loop-wrap{
  position:relative; width:100%; max-width:420px; margin:0 auto; aspect-ratio:1/1;
  background:radial-gradient(circle at 50% 50%, rgba(0,229,168,0.05), transparent 65%), var(--ag-bg);
  border:1px solid var(--ag-line); border-radius:16px;
}
.ag-loop-svg{ width:100%; height:100%; display:block; }

.ag-loop-track{ fill:none; stroke:var(--ag-line); stroke-width:1.4; stroke-dasharray:3 6; }
.ag-escalate-line{ fill:none; stroke:var(--ag-escalate); stroke-width:1.2; stroke-dasharray:3 4; opacity:0.35; transition:opacity .3s ease; }
.ag-escalate-line.ag-flash{ opacity:0.9; }

.ag-node-circle{
  fill:var(--ag-bg); stroke:var(--ag-line); stroke-width:1.6;
  transition:stroke .35s ease, filter .35s ease, transform .35s ease;
  transform-origin:center; transform-box:fill-box;
}
.ag-node.ag-active .ag-node-circle{
  stroke:var(--ag-accent); filter:drop-shadow(0 0 10px var(--ag-accent)); transform:scale(1.08);
}
.ag-node-icon{ stroke:var(--ag-fog); fill:none; stroke-width:1.6; transition:stroke .35s ease; }
.ag-node.ag-active .ag-node-icon{ stroke:var(--ag-accent); }
.ag-node-label{
  font-family:var(--ag-mono); font-size:10.5px; fill:var(--ag-fog); text-anchor:middle;
  transition:fill .3s ease;
}
.ag-node.ag-active .ag-node-label{ fill:#fff; }

/* nodo Decide: mini red neuronal interna */
.ag-think-dot{ fill:var(--ag-accent-2); opacity:0.25; animation:ag-think-flicker 2.6s ease-in-out infinite; }
.ag-think-line{ stroke:var(--ag-accent-2); stroke-width:0.8; opacity:0.15; }
.ag-node.ag-thinking .ag-think-dot{ animation-duration:0.7s; opacity:0.9; }
.ag-node.ag-thinking .ag-think-line{ opacity:0.5; }
@keyframes ag-think-flicker{ 0%,100%{ opacity:0.15; } 50%{ opacity:0.6; } }

.ag-node-escalate .ag-node-circle{ stroke:rgba(240,194,78,0.4); }
.ag-node-escalate.ag-active .ag-node-circle{ stroke:var(--ag-escalate); filter:drop-shadow(0 0 10px var(--ag-escalate)); }
.ag-node-escalate.ag-active .ag-node-label{ fill:var(--ag-escalate); }
.ag-node-escalate .ag-node-icon{ stroke:rgba(240,194,78,0.55); }
.ag-node-escalate.ag-active .ag-node-icon{ stroke:var(--ag-escalate); }

.ag-pulse{ fill:var(--ag-accent); filter:drop-shadow(0 0 8px var(--ag-accent)); }
.ag-pulse.ag-pulse-escalate{ fill:var(--ag-escalate); filter:drop-shadow(0 0 8px var(--ag-escalate)); }

/* centro: etapa actual + contador de ciclos */
.ag-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; pointer-events:none;
}
.ag-center-stage{ font-family:var(--ag-mono); font-size:13px; color:#fff; letter-spacing:.02em; margin-bottom:4px; }
.ag-center-cycles{ font-family:var(--ag-mono); font-size:10.5px; color:var(--ag-fog); }
.ag-center-cycles b{ color:var(--ag-accent); font-weight:600; }

/* chips de entrada/salida de datos */
.ag-chip{
  position:absolute; font-family:var(--ag-mono); font-size:10px; color:var(--ag-accent);
  background:rgba(0,229,168,0.08); border:1px solid var(--ag-line); padding:4px 9px; border-radius:100px;
  white-space:nowrap; opacity:0; pointer-events:none; transform:translate(-50%,-50%);
  transition:opacity .35s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.ag-chip.ag-chip-in{ top:-6%; left:50%; }
.ag-chip.ag-chip-in.ag-show{ opacity:1; top:14%; }
.ag-chip.ag-chip-out{ bottom:-6%; left:50%; color:var(--ag-accent-2); border-color:rgba(58,160,255,0.35); background:rgba(58,160,255,0.08); }
.ag-chip.ag-chip-out.ag-show{ opacity:1; bottom:14%; }
.ag-chip.ag-chip-escalate{ top:8%; left:82%; color:var(--ag-escalate); border-color:rgba(240,194,78,0.4); background:rgba(240,194,78,0.08); }
.ag-chip.ag-chip-escalate.ag-show{ opacity:1; top:2%; left:96%; }

/* leyenda opcional debajo del diagrama */
.ag-legend{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:16px; font-family:var(--ag-mono); font-size:11px; color:var(--ag-fog); }
.ag-legend span{ display:inline-flex; align-items:center; gap:6px; }
.ag-legend i{ width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--ag-accent); }
.ag-legend i.ag-dot-escalate{ background:var(--ag-escalate); }

@media (prefers-reduced-motion: reduce){
  .ag-pulse{ display:none; }
  .ag-think-dot{ animation:none !important; opacity:0.4; }
  .ag-chip{ transition:opacity .2s ease; }
}

/* ==========================================================================
   RED MULTI-AGENTE — cómo un agente coordina e interactúa con otros
   agentes especializados. Namespace compartido .ag-*
   ========================================================================== */

.ag-net-wrap{
  position:relative; width:100%; max-width:520px; margin:0 auto;
  background:radial-gradient(circle at 50% 50%, rgba(0,229,168,0.05), transparent 65%), var(--ag-bg);
  border:1px solid var(--ag-line); border-radius:16px; padding-bottom:14px;
}
.ag-net-svg{ width:100%; height:auto; display:block; aspect-ratio:1/1; }

.ag-net-spoke{ stroke:var(--ag-line); stroke-width:1.4; fill:none; }
.ag-net-peer-line{ stroke:var(--ag-accent-2); stroke-width:1.3; fill:none; stroke-dasharray:3 5; opacity:0; transition:opacity .3s ease; }
.ag-net-peer-line.ag-show{ opacity:0.75; }

.ag-net-node-circle{
  fill:var(--ag-bg); stroke:var(--ag-line); stroke-width:1.6;
  transform-origin:center; transform-box:fill-box; transition:stroke .3s ease, filter .3s ease, transform .3s ease;
}
.ag-net-node.ag-net-active .ag-net-node-circle{ transform:scale(1.1); }
.ag-net-initial{ font-family:var(--ag-mono); font-weight:600; text-anchor:middle; dominant-baseline:central; fill:var(--ag-fog); font-size:15px; transition:fill .3s ease; }
.ag-net-node.ag-net-active .ag-net-initial{ fill:#fff; }
.ag-net-label{ font-family:var(--ag-mono); font-size:10px; text-anchor:middle; fill:var(--ag-fog); }
.ag-net-status{ font-family:var(--ag-mono); font-size:8.5px; text-anchor:middle; fill:var(--ag-fog); opacity:0; transition:opacity .25s ease; }
.ag-net-node.ag-net-active .ag-net-status{ opacity:1; }

.ag-net-node.ag-net-core .ag-net-node-circle{ stroke:var(--ag-accent); stroke-width:2; }
.ag-net-node.ag-net-core .ag-net-initial{ fill:var(--ag-accent); }

.ag-net-pulse{ filter:drop-shadow(0 0 6px currentColor); }
.ag-net-pulse.ag-dir-task{ fill:var(--ag-accent); color:var(--ag-accent); }
.ag-net-pulse.ag-dir-result{ fill:var(--ag-accent-2); color:var(--ag-accent-2); }
.ag-net-pulse.ag-dir-peer{ fill:var(--ag-escalate); color:var(--ag-escalate); }

/* bitácora de interacción, debajo del diagrama */
.ag-net-log{
  font-family:var(--ag-mono); font-size:11px; color:var(--ag-fog); padding:0 18px; display:flex;
  flex-direction:column; gap:6px; min-height:78px;
}
.ag-net-log .ag-log-line{ opacity:0; transform:translateY(5px); animation:ag-log-in .45s ease forwards; }
.ag-net-log .ag-log-line b{ font-weight:600; }
@keyframes ag-log-in{ to{ opacity:1; transform:translateY(0); } }

.ag-net-legend{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; padding:12px 18px 0; font-family:var(--ag-mono); font-size:10.5px; color:var(--ag-fog); }
.ag-net-legend span{ display:inline-flex; align-items:center; gap:6px; }
.ag-net-legend i{ width:16px; height:2px; display:inline-block; }
.ag-net-legend i.ag-leg-task{ background:var(--ag-accent); }
.ag-net-legend i.ag-leg-result{ background:var(--ag-accent-2); }
.ag-net-legend i.ag-leg-peer{ background:var(--ag-escalate); }

@media (prefers-reduced-motion: reduce){
  .ag-net-pulse{ display:none; }
}