/* ==========================================================================
   Cerebial — demo interactiva "Mirá cómo razona"
   Se carga solo en las páginas que la usan.
   ========================================================================== */

.agentx{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}

/* --- selector de escenarios --- */
.ax-tabs{
  display:flex;gap:6px;padding:12px;border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;background:rgba(0,0,0,.22);
}
.ax-tabs::-webkit-scrollbar{display:none}
.ax-tab{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  font-size:.83rem;font-weight:500;color:var(--ink-2);
  padding:9px 15px;border-radius:100px;border:1px solid var(--line);
  background:rgba(255,255,255,.02);transition:.18s var(--ease);white-space:nowrap;
}
.ax-tab:hover{color:var(--ink);border-color:var(--line-2)}
.ax-tab[aria-selected="true"]{
  background:linear-gradient(180deg,#8B6DFF,#6A45F5);color:#fff;border-color:transparent;
  box-shadow:0 6px 20px -8px rgba(124,92,255,.9);
}
.ax-tab u{text-decoration:none;font-family:var(--font-mono);font-size:.68rem;opacity:.7}

/* --- cuerpo --- */
.ax-body{display:grid;grid-template-columns:1fr 1fr;min-height:470px}
@media(max-width:900px){.ax-body{grid-template-columns:1fr;min-height:0}}

/* --- panel chat --- */
.ax-chat{display:flex;flex-direction:column;border-right:1px solid var(--line)}
@media(max-width:900px){.ax-chat{border-right:none;border-bottom:1px solid var(--line)}}
.ax-chat__top{display:flex;align-items:center;gap:11px;padding:15px 20px;border-bottom:1px solid var(--line)}
.ax-chat__av{
  width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:.9rem;color:#fff;
  background:linear-gradient(150deg,#8B6DFF,#3B1FA8);
}
.ax-chat__id strong{display:block;font-size:.9rem;line-height:1.25;color:var(--ink)}
.ax-chat__id em{font-style:normal;font-family:var(--font-mono);font-size:.67rem;color:var(--green)}
.ax-chat__ch{margin-left:auto;font-family:var(--font-mono);font-size:.65rem;color:var(--ink-3);
  border:1px solid var(--line);border-radius:100px;padding:4px 10px}

.ax-thread{
  flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
  padding:22px 20px;min-height:330px;max-height:440px;overflow-y:auto;scrollbar-width:thin;
}
.ax-msg{
  max-width:86%;padding:11px 15px;border-radius:16px;font-size:.92rem;line-height:1.5;
  animation:axPop .34s var(--ease) both;
}
.ax-msg--in{background:rgba(255,255,255,.07);border:1px solid var(--line);
  border-bottom-left-radius:5px;align-self:flex-start;color:var(--ink)}
.ax-msg--out{
  background:linear-gradient(165deg,#7A57FF,#5B32E8);color:#fff;
  border-bottom-right-radius:5px;align-self:flex-end;
  box-shadow:0 10px 26px -14px rgba(124,92,255,.9);
}
.ax-msg--sys{
  align-self:center;max-width:100%;background:rgba(251,191,36,.09);border:1px solid rgba(251,191,36,.3);
  color:var(--amber);font-family:var(--font-mono);font-size:.72rem;border-radius:10px;padding:9px 13px;
  text-align:center;
}
.ax-msg b{color:inherit;font-weight:700}
.ax-msg small{display:block;font-family:var(--font-mono);font-size:.62rem;opacity:.62;margin-top:7px}
.ax-msg--in small{color:var(--ink-3);opacity:1}
.ax-audio{display:flex;align-items:center;gap:10px;min-width:190px}
.ax-audio__bars{display:flex;align-items:center;gap:2px;height:20px;flex:1}
.ax-audio__bars i{flex:1;background:var(--violet-2);border-radius:2px;opacity:.55;
  animation:axWave 1.1s ease-in-out infinite}
.ax-audio svg{width:17px;height:17px;stroke:var(--violet-2);fill:none;stroke-width:1.8;flex:none}
@keyframes axWave{0%,100%{height:25%}50%{height:100%}}
@keyframes axPop{from{opacity:0;transform:translateY(9px) scale(.985)}}

.ax-typing{align-self:flex-start;display:inline-flex;gap:4px;padding:13px 16px;border-radius:16px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-bottom-left-radius:5px}
.ax-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:axBlink 1.3s infinite}
.ax-typing i:nth-child(2){animation-delay:.18s}
.ax-typing i:nth-child(3){animation-delay:.36s}
@keyframes axBlink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* --- panel razonamiento --- */
.ax-trace{display:flex;flex-direction:column;background:rgba(0,0,0,.28)}
.ax-trace__top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;border-bottom:1px solid var(--line);
}
.ax-trace__top h3{font-size:.86rem;font-family:var(--font-mono);font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
.ax-replay{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:.7rem;
  color:var(--ink-2);border:1px solid var(--line);border-radius:100px;padding:6px 13px;transition:.18s;
}
.ax-replay:hover{border-color:var(--line-2);color:var(--ink)}

.ax-steps{list-style:none;padding:18px 20px;display:grid;gap:2px;flex:1;align-content:start}
.ax-step{
  display:grid;grid-template-columns:22px 1fr;gap:13px;padding:11px 0;position:relative;
  opacity:.28;transition:opacity .3s;
}
.ax-step:not(:last-child)::before{
  content:'';position:absolute;left:10.5px;top:30px;bottom:-2px;width:1px;background:var(--line);
}
.ax-step.is-run,.ax-step.is-done{opacity:1}
.ax-step__dot{
  width:21px;height:21px;border-radius:50%;border:1px solid var(--line-2);flex:none;
  display:grid;place-items:center;background:var(--bg-elev);position:relative;z-index:1;
  transition:.25s var(--ease);
}
.ax-step__dot::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--ink-3);transition:.25s}
.ax-step.is-run .ax-step__dot{border-color:var(--violet-2);box-shadow:0 0 0 4px rgba(124,92,255,.14)}
.ax-step.is-run .ax-step__dot::after{background:var(--violet-2);animation:axBlink 1s infinite}
.ax-step.is-done .ax-step__dot{border-color:rgba(52,211,153,.55);background:rgba(52,211,153,.12)}
.ax-step.is-done .ax-step__dot::after{
  width:9px;height:5px;border-radius:0;background:none;
  border-left:1.7px solid var(--green);border-bottom:1.7px solid var(--green);
  transform:rotate(-45deg) translate(1px,-1px);
}
.ax-step.is-stop .ax-step__dot{border-color:rgba(251,191,36,.6);background:rgba(251,191,36,.14)}
.ax-step.is-stop .ax-step__dot::after{background:var(--amber);width:7px;height:7px}
.ax-step__t{font-size:.88rem;color:var(--ink);line-height:1.4}
.ax-step__r{
  display:block;margin-top:6px;font-family:var(--font-mono);font-size:.72rem;color:var(--ink-3);
  opacity:0;transform:translateY(-3px);transition:.3s var(--ease);
}
.ax-step.is-done .ax-step__r,.ax-step.is-stop .ax-step__r{opacity:1;transform:none}
.ax-step__r b{color:var(--green);font-weight:500}
.ax-step.is-stop .ax-step__r b{color:var(--amber)}
.ax-step.is-warn .ax-step__r b{color:var(--amber)}

.ax-foot{
  border-top:1px solid var(--line);padding:13px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.ax-foot p{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-3);margin:0}
.ax-foot p b{color:var(--ink-2);font-weight:500}