/* ============================================================
   Tensoria Digital · Live System Demos
   Pruebas visuales de cómo una entrada se convierte en resultado.
   El JS solo activa estados; la presentación y movimiento viven aquí.
   ============================================================ */

.td-system-demo{
  --demo-accent:var(--td-blue,#2337e4);
  --demo-signal:var(--td-signal,#e8500a);
  --demo-ink:var(--td-ink,#10173a);
  --demo-muted:var(--td-ink-soft,#4c5578);
  --demo-paper:var(--td-paper,#f4f5fa);
  --demo-line:var(--td-line,rgba(16,23,58,.14));
  --demo-line-soft:var(--td-line-soft,rgba(16,23,58,.08));
  --demo-x:78%;
  --demo-y:18%;

  position:relative;
  isolation:isolate;
  container-type:inline-size;
  display:grid;
  gap:.85rem;
  width:100%;
  min-height:370px;
  padding:1rem;
  overflow:hidden;
  border:1px solid var(--demo-line-soft);
  border-radius:16px;
  background:
    linear-gradient(rgba(16,23,58,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,23,58,.026) 1px, transparent 1px),
    #ffffff;
  background-size:24px 24px;
  box-shadow:0 18px 44px rgba(16,23,58,.08), inset 0 1px 0 rgba(255,255,255,.95);
  color:var(--demo-ink);
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.td-system-demo::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:radial-gradient(360px circle at var(--demo-x) var(--demo-y), rgba(35,55,228,.13), transparent 58%);
  opacity:.8;
  pointer-events:none;
  transition:opacity .3s ease;
}

.td-system-demo::after{
  content:"";
  position:absolute;
  z-index:3;
  top:0;
  right:0;
  left:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(35,55,228,.62), rgba(232,80,10,.52), transparent);
  opacity:0;
  pointer-events:none;
}

.td-system-demo:hover{
  border-color:rgba(35,55,228,.22);
  box-shadow:0 24px 58px rgba(16,23,58,.12), inset 0 1px 0 rgba(255,255,255,.98);
  transform:translateY(-2px);
}

.td-system-demo.is-running::after{
  animation:tdDemoScan 4.8s cubic-bezier(.4,0,.2,1) infinite;
}

.td-system-demo--automatizacion{--demo-accent:#0b8fa8}
.td-system-demo--ia-aplicada{--demo-accent:#5d46e8}
.td-system-demo--integraciones{--demo-accent:#116f9b}
.td-system-demo--facturacion{--demo-accent:#d15a1a}
.td-system-demo--apps-moviles{--demo-accent:#3165d4}

.td-system-demo__topbar{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:.65rem;
  align-items:center;
  min-height:1.8rem;
  padding-bottom:.65rem;
  border-bottom:1px solid var(--demo-line-soft);
}

.td-system-demo__lights{
  display:flex;
  gap:.28rem;
}

.td-system-demo__lights i{
  display:block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(16,23,58,.18);
}

.td-system-demo__lights i:first-child{background:var(--demo-signal)}
.td-system-demo__lights i:nth-child(2){background:#f2b84b}
.td-system-demo__lights i:nth-child(3){background:#2caf76}

.td-system-demo__mode,
.td-system-demo__live{
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.56rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.td-system-demo__mode{
  color:var(--demo-muted);
}

.td-system-demo__live{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:.35rem;
  min-width:8.5rem;
  color:var(--demo-muted);
}

.td-system-demo__live > i{
  flex:0 0 auto;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#20a86d;
  box-shadow:0 0 0 4px rgba(32,168,109,.12);
}

.td-system-demo.is-running .td-system-demo__live > i{
  animation:tdDemoLivePulse 1.7s ease-in-out infinite;
}

.td-system-demo__headline{
  position:relative;
  z-index:1;
  display:grid;
  gap:.3rem;
}

.td-system-demo__headline > span{
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.57rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--demo-accent);
}

.td-system-demo__headline > strong{
  max-width:34ch;
  font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;
  font-size:clamp(1rem,3.4cqw,1.35rem);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.018em;
  color:var(--demo-ink);
}

.td-system-demo__flow{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.82fr) 24px minmax(145px,1.2fr) 24px minmax(0,.9fr);
  gap:.3rem;
  align-items:center;
}

.td-system-demo__card{
  position:relative;
  display:grid;
  gap:.35rem;
  align-content:center;
  min-width:0;
  min-height:7.5rem;
  padding:.75rem;
  overflow:hidden;
  border:1px solid var(--demo-line-soft);
  border-radius:11px;
  background:rgba(255,255,255,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

.td-system-demo__card small,
.td-system-demo__pipeline small{
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.52rem;
  line-height:1.35;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--demo-muted);
}

.td-system-demo__card strong{
  font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;
  font-size:.82rem;
  font-weight:500;
  line-height:1.22;
  color:var(--demo-ink);
}

.td-system-demo__card > span{
  font-size:.64rem;
  line-height:1.4;
  color:var(--demo-muted);
}

.td-system-demo__input{
  border-top:2px solid var(--demo-accent);
}

.td-system-demo__source-pulse{
  position:absolute;
  top:.7rem;
  right:.7rem;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--demo-accent);
}

.td-system-demo.is-running .td-system-demo__source-pulse{
  animation:tdDemoSourcePulse 1.8s ease-out infinite;
}

.td-system-demo__result{
  padding-right:2rem;
  border-color:rgba(232,80,10,.16);
  background:linear-gradient(145deg, rgba(255,255,255,.9), rgba(232,80,10,.045));
  opacity:.64;
  transition:opacity .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

.td-system-demo__result.is-complete{
  border-color:rgba(232,80,10,.42);
  box-shadow:0 10px 28px rgba(232,80,10,.1), inset 0 1px 0 rgba(255,255,255,.96);
  opacity:1;
  transform:translateY(-1px);
}

.td-system-demo__result-check{
  position:absolute;
  top:.65rem;
  right:.65rem;
  display:grid;
  place-items:center;
  width:1.25rem;
  height:1.25rem;
  border-radius:50%;
  background:var(--demo-signal);
  color:#ffffff;
  font-size:.68rem;
  font-style:normal;
  font-weight:600;
  opacity:0;
  transform:scale(.45) rotate(-16deg);
  transition:opacity .32s ease, transform .42s cubic-bezier(.22,1,.36,1);
}

.td-system-demo__result.is-complete .td-system-demo__result-check{
  opacity:1;
  transform:scale(1) rotate(0);
}

.td-system-demo__pipeline{
  display:grid;
  gap:.35rem;
}

.td-system-demo__step{
  display:grid;
  grid-template-columns:1.35rem minmax(0,1fr) 1rem;
  gap:.45rem;
  align-items:center;
  min-height:2.45rem;
  padding:.42rem .45rem;
  border:1px solid transparent;
  border-radius:9px;
  background:rgba(244,245,250,.72);
  transition:border-color .28s ease, background-color .28s ease, box-shadow .28s ease, transform .28s ease;
}

.td-system-demo__step.is-active{
  border-color:color-mix(in srgb, var(--demo-accent) 34%, transparent);
  background:color-mix(in srgb, var(--demo-accent) 7%, #ffffff);
  box-shadow:0 8px 20px color-mix(in srgb, var(--demo-accent) 9%, transparent);
  transform:translateX(2px);
}

.td-system-demo__step-index{
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.52rem;
  letter-spacing:.04em;
  color:var(--demo-accent);
}

.td-system-demo__step-copy{
  display:grid;
  gap:.05rem;
  min-width:0;
}

.td-system-demo__step-copy strong{
  overflow:hidden;
  font-size:.67rem;
  font-weight:600;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--demo-ink);
}

.td-system-demo__step-state{
  position:relative;
  display:grid;
  place-items:center;
  width:.9rem;
  height:.9rem;
  border:1px solid var(--demo-line);
  border-radius:50%;
  background:#ffffff;
  font-style:normal;
}

.td-system-demo__step-state::before{
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(16,23,58,.22);
}

.td-system-demo__step.is-active .td-system-demo__step-state{
  border-color:var(--demo-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--demo-accent) 12%, transparent);
}

.td-system-demo__step.is-active .td-system-demo__step-state::before{
  background:var(--demo-accent);
}

.td-system-demo__step.is-done .td-system-demo__step-state{
  border-color:#20a86d;
  background:#20a86d;
}

.td-system-demo__step.is-done .td-system-demo__step-state::before{
  content:"✓";
  width:auto;
  height:auto;
  background:none;
  color:#ffffff;
  font-size:.52rem;
  font-weight:700;
  line-height:1;
}

.td-system-demo.is-running .td-system-demo__step.is-active .td-system-demo__step-state{
  animation:tdDemoStepPulse 1.15s ease-in-out infinite;
}

.td-system-demo__bridge{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:1.2rem;
}

.td-system-demo__bridge > span{
  display:block;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, var(--demo-line), color-mix(in srgb, var(--demo-accent) 45%, transparent));
}

.td-system-demo__bridge > i{
  position:absolute;
  top:50%;
  left:0;
  width:6px;
  height:6px;
  margin-top:-3px;
  border-radius:50%;
  background:var(--demo-accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--demo-accent) 11%, transparent);
  opacity:0;
}

.td-system-demo__bridge--out > i{
  background:var(--demo-signal);
  box-shadow:0 0 0 4px rgba(232,80,10,.11);
}

.td-system-demo.is-running .td-system-demo__bridge > i{
  animation:tdDemoPacket 2.8s cubic-bezier(.45,0,.2,1) infinite;
}

.td-system-demo.is-running .td-system-demo__bridge--out > i{
  animation-delay:1.35s;
}

.td-system-demo__event{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:.55rem;
  align-items:center;
  min-height:2rem;
  padding:.42rem .65rem;
  border:1px solid rgba(126,146,190,.16);
  border-radius:8px;
  background:#0c132c;
  color:#c8d2f1;
}

.td-system-demo__event span,
.td-system-demo__event small,
.td-system-demo__event code{
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.52rem;
  letter-spacing:.06em;
}

.td-system-demo__event span{
  color:#7f91c5;
  text-transform:uppercase;
}

.td-system-demo__event code{
  overflow:hidden;
  color:#e9edff;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.td-system-demo__event small{
  color:#8fa2ff;
}

.td-system-demo__metrics{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.45rem;
}

.td-system-demo__metrics > span{
  display:grid;
  gap:.1rem;
  padding:.48rem .55rem;
  border-left:2px solid color-mix(in srgb, var(--demo-accent) 55%, transparent);
  background:rgba(255,255,255,.6);
}

.td-system-demo__metrics strong{
  font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;
  font-size:.78rem;
  font-weight:600;
  color:var(--demo-ink);
}

.td-system-demo__metrics small{
  font-family:"IBM Plex Mono","Consolas",monospace;
  font-size:.48rem;
  line-height:1.35;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--demo-muted);
}

.td-system-demo__progress{
  position:relative;
  z-index:1;
  height:2px;
  overflow:hidden;
  border-radius:999px;
  background:var(--demo-line-soft);
}

.td-system-demo__progress > span{
  display:block;
  width:25%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--demo-accent),var(--demo-signal));
  transition:width .55s cubic-bezier(.22,1,.36,1);
}

@container (max-width:430px){
  .td-system-demo{
    min-height:0;
  }

  .td-system-demo__mode{
    display:none;
  }

  .td-system-demo__topbar{
    grid-template-columns:auto 1fr;
  }

  .td-system-demo__live{
    grid-column:2;
    justify-self:end;
    min-width:0;
  }

  .td-system-demo__flow{
    grid-template-columns:1fr;
    gap:.35rem;
  }

  .td-system-demo__card{
    min-height:4.6rem;
  }

  .td-system-demo__bridge{
    justify-self:center;
    width:1.2rem;
    height:1.25rem;
  }

  .td-system-demo__bridge > span{
    width:1px;
    height:100%;
    margin:auto;
    background:linear-gradient(180deg,var(--demo-line),color-mix(in srgb,var(--demo-accent) 45%,transparent));
  }

  .td-system-demo__bridge > i{
    top:0;
    left:50%;
    margin-top:0;
    margin-left:-3px;
  }

  .td-system-demo.is-running .td-system-demo__bridge > i{
    animation-name:tdDemoPacketVertical;
  }
}

@keyframes tdDemoScan{
  0%{opacity:0;transform:translateY(-4px)}
  12%{opacity:.8}
  45%{opacity:.16}
  65%,100%{opacity:0;transform:translateY(370px)}
}

@keyframes tdDemoLivePulse{
  0%,100%{box-shadow:0 0 0 4px rgba(32,168,109,.1)}
  50%{box-shadow:0 0 0 8px rgba(32,168,109,0)}
}

@keyframes tdDemoSourcePulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--demo-accent) 26%,transparent)}
  70%,100%{box-shadow:0 0 0 10px transparent}
}

@keyframes tdDemoStepPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}

@keyframes tdDemoPacket{
  0%{left:0;opacity:0;transform:scale(.7)}
  16%{opacity:1}
  82%{opacity:1}
  100%{left:calc(100% - 6px);opacity:0;transform:scale(1)}
}

@keyframes tdDemoPacketVertical{
  0%{top:0;opacity:0;transform:scale(.7)}
  16%{opacity:1}
  82%{opacity:1}
  100%{top:calc(100% - 6px);opacity:0;transform:scale(1)}
}

@media (prefers-reduced-motion:reduce){
  .td-system-demo,
  .td-system-demo::after,
  .td-system-demo *,
  .td-system-demo *::before,
  .td-system-demo *::after{
    animation:none!important;
    transition:none!important;
  }

  .td-system-demo:hover{
    transform:none;
  }
}