/* =====================================================================
   Editor de código de ejemplo (js/ide-demo.js): tema oscuro, explorador de archivos,
   código que se escribe solo y el panel del agente de IA marcando sus pasos.
   Los tamaños van en cqw (ancho del editor) para que todo escale con la ilustración.
   ===================================================================== */
.ide-demo{container-type:inline-size;width:100%;height:100%;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  align-self:stretch;background:#0f1218;color:#c9d1e0;font-family:var(--texto);line-height:1.45;box-shadow:0 0 0 1px #232838}
.ide-demo i{font-style:normal}
.ide-barra{flex:none;display:flex;align-items:center;gap:2cqw;padding:1.6cqw 2.2cqw;background:#161a23;border-bottom:1px solid #232838}
.ide-barra .luces{display:flex;gap:1cqw}
.ide-barra .luces i{width:1.7cqw;height:1.7cqw;border-radius:50%;background:#a3312a}
.ide-barra .luces i:nth-child(2){background:#c9832a}
.ide-barra .luces i:nth-child(3){background:#1d7a52}
.ide-titulo{margin:0 auto;color:#7d8597;font-size:1.7cqw;padding-right:6cqw}
.ide-cuerpo{flex:1;min-height:0;display:grid;grid-template-columns:5cqw 14cqw 1fr 25cqw}
.ide-act{background:#12151d;border-right:1px solid #232838;display:flex;flex-direction:column;align-items:center;gap:2.2cqw;padding-top:2.2cqw}
.ide-act i{width:2.4cqw;height:2.4cqw;border-radius:.6cqw;border:.25cqw solid #4b5367}
.ide-act i:first-child{border-color:#9b82ff}
.ide-arbol{background:#12151d;border-right:1px solid #232838;padding:1.8cqw 1.6cqw;display:flex;flex-direction:column;gap:.7cqw;font-size:1.6cqw;color:#8b93a6;overflow:hidden;white-space:nowrap}
.ide-arbol b{font-size:1.2cqw;letter-spacing:.06em;color:#5f6779;font-weight:600;margin-bottom:.4cqw}
.ide-arbol span{padding:.2cqw .8cqw;border-radius:.6cqw;padding-left:2cqw}
.ide-arbol .dir{padding-left:.8cqw}
.ide-arbol .on{background:rgba(107,70,252,.22);color:#e6e0ff}
.ide-editor{min-width:0;display:flex;flex-direction:column}
.ide-pestanas{flex:none;display:flex;background:#12151d;border-bottom:1px solid #232838;font-size:1.6cqw}
.ide-pestanas span{padding:1cqw 2cqw;color:#6f778a;border-right:1px solid #232838}
.ide-pestanas .on{background:#0f1218;color:#e6e9f0;box-shadow:inset 0 .3cqw 0 #6b46fc}
.ide-codigo{flex:1;padding:1.6cqw 0;font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:1.75cqw;line-height:1.95;overflow:hidden;white-space:pre}
.ide-codigo .l{display:flex}
.ide-codigo .n{flex:none;width:4.4cqw;text-align:right;padding-right:1.8cqw;color:#3f4659}
.ide-codigo .k{color:#c792ea}
.ide-codigo .f{color:#82aaff}
.ide-codigo .s{color:#a5d6a7}
.ide-codigo .c{color:#5f6b80;font-style:italic}
.ide-codigo .p{color:#89ddff}
.ide-codigo .cursor{display:inline-block;width:.25cqw;height:1.15em;background:#9b82ff;vertical-align:-.2em;margin-left:1px;animation:ideCursor 1s steps(1) infinite}
@keyframes ideCursor{50%{opacity:0}}
.ide-agente{background:#141824;border-left:1px solid #232838;padding:1.8cqw 1.8cqw;display:flex;flex-direction:column;gap:1.2cqw;font-size:1.7cqw;overflow:hidden}
.ide-agente b{display:flex;align-items:center;gap:.8cqw;color:#e6e0ff;font-size:1.8cqw}
.ide-agente b::before{content:"";width:1.4cqw;height:1.4cqw;border-radius:50%;background:linear-gradient(135deg,#6b46fc,#c04bd8)}
.ide-agente p{margin:0;padding:1cqw 1.2cqw;border-radius:1cqw}
.ide-agente .pide{background:#232a3b;color:#dfe4ee;align-self:flex-end}
.ide-agente .resp{background:rgba(107,70,252,.18);color:#d9d1ff}
.ide-agente code{font-family:ui-monospace,Consolas,monospace;color:#82aaff}
.ide-agente ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.8cqw}
.ide-agente li{display:flex;align-items:center;gap:.9cqw;color:#7d8597;transition:color .3s}
.ide-agente li::before{content:"";flex:none;width:1.5cqw;height:1.5cqw;border-radius:50%;border:.25cqw solid #4b5367;box-sizing:border-box;transition:all .3s}
.ide-agente li.hecho{color:#dfe4ee}
.ide-agente li.hecho::before{border:0;background:#22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 5.2l1.6 1.6L7.6 3.3' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%}
.ide-agente .fin{background:rgba(34,197,94,.14);color:#86efac;opacity:0;transform:translateY(.6cqw);transition:opacity .4s,transform .4s}
.ide-agente .fin.ver{opacity:1;transform:none}
.ide-estado{flex:none;display:flex;align-items:center;gap:1cqw;padding:.8cqw 2cqw;background:#6b46fc;color:#fff;font-size:1.55cqw}
.ide-estado .punto{width:1.1cqw;height:1.1cqw;border-radius:50%;background:#fbbf24;animation:ideCursor 1s steps(1) infinite}
.ide-demo.listo .ide-estado .punto{background:#4ade80;animation:none}
.ide-estado .ln{margin-left:auto;opacity:.85}
.ide-demo .ide-codigo,.ide-demo .ide-agente{transition:opacity .35s}
.ide-demo.reinicia .ide-codigo,.ide-demo.reinicia .ide-agente{opacity:.25}
/* ---------- El software ya funcionando: aparece con un círculo que se abre desde el centro ---------- */
.ide-demo{position:relative}
.ide-app{position:absolute;inset:0;display:flex;flex-direction:column;background:#f6f7fb;color:#2a2f39;font-size:1.6cqw;
  clip-path:circle(0% at 50% 55%);transition:clip-path .8s cubic-bezier(.6,0,.3,1);pointer-events:none}
.ide-demo.app .ide-app{clip-path:circle(120% at 50% 55%)}
.ide-demo .ide-cuerpo,.ide-demo .ide-estado{transition:transform .8s cubic-bezier(.6,0,.3,1),filter .8s}
.ide-demo.app .ide-cuerpo,.ide-demo.app .ide-estado{transform:scale(.94);filter:blur(2px)}
.app-nav{flex:none;display:flex;align-items:center;gap:2cqw;padding:1.4cqw 2.2cqw;background:#e9ebf1;border-bottom:1px solid #dde0e8}
.app-nav .luces{display:flex;gap:1cqw}
.app-nav .luces i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:#e5534b}
.app-nav .luces i:nth-child(2){background:#e8a33c}
.app-nav .luces i:nth-child(3){background:#2fb466}
.app-nav .url{flex:1;max-width:52cqw;margin:0 auto;background:#fff;border-radius:99px;padding:.5cqw 2cqw;font-size:1.4cqw;color:#646b7c;text-align:center}
.app-top{flex:none;display:flex;align-items:center;gap:2cqw;padding:1.4cqw 2.4cqw;background:#fff;border-bottom:1px solid #e3e5eb}
.app-top b{display:flex;align-items:center;gap:1cqw;font-family:var(--titulos);font-size:1.9cqw}
.app-top b i{width:2.6cqw;height:2.6cqw;border-radius:.8cqw;background:linear-gradient(135deg,#6b46fc,#c04bd8)}
.app-top .buscar{flex:1;max-width:34cqw;margin-left:3cqw;background:#f3f4f7;border-radius:1cqw;padding:.8cqw 1.6cqw;color:#9aa1b0;font-size:1.4cqw}
.app-top .campana{margin-left:auto;width:2.2cqw;height:2.2cqw;border-radius:50%;border:.3cqw solid #9aa1b0;position:relative}
.app-top .campana::after{content:"";position:absolute;right:-.5cqw;top:-.5cqw;width:1cqw;height:1cqw;border-radius:50%;background:#ef4444}
.app-top .yo{width:3cqw;height:3cqw;border-radius:50%;background:#2a2f39;color:#fff;font-size:1.2cqw;font-weight:600;display:flex;align-items:center;justify-content:center}
.app-cuerpo{flex:1;min-height:0;display:grid;grid-template-columns:19cqw 1fr}
.app-menu{background:#fff;border-right:1px solid #e3e5eb;padding:2cqw 1.4cqw;display:flex;flex-direction:column;gap:.6cqw}
.app-menu span{display:flex;align-items:center;gap:1.2cqw;padding:1cqw 1.2cqw;border-radius:1cqw;color:#646b7c;font-weight:500;font-size:1.75cqw}
.app-menu svg{width:2.2cqw;height:2.2cqw;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.app-menu .on{background:#f1edff;color:#5230e6;font-weight:600}
.app-main{padding:2.2cqw 2.6cqw;display:flex;flex-direction:column;gap:1.8cqw;min-width:0}
.app-tit{display:flex;align-items:center;justify-content:space-between}
.app-tit b{font-family:var(--titulos);font-size:3cqw}
.boton-app{background:#6b46fc;color:#fff;border-radius:99px;padding:.8cqw 2cqw;font-size:1.4cqw;font-weight:600}
.app-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw}
.app-kpis div,.app-graf,.app-tabla{background:#fff;border:1px solid #e3e5eb;border-radius:1.4cqw;padding:1.6cqw 1.8cqw}
.app-kpis small,.app-graf small,.app-tabla small{display:block;color:#7d8597;font-size:1.55cqw}
.app-kpis strong{display:block;font-family:var(--titulos);font-size:4.2cqw;line-height:1.15}
.app-kpis em{font-style:normal;font-size:1.45cqw;font-weight:600}
.sube{color:#16a34a}
.app-kpis .ojo{color:#c9832a}
.app-fila{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1.35fr;gap:1.6cqw}
.app-graf{display:flex;flex-direction:column}
.barras{flex:1;display:flex;align-items:flex-end;gap:1.2cqw;margin-top:1.4cqw;min-height:8cqw}
.barras i{flex:1;border-radius:.6cqw .6cqw 0 0;background:linear-gradient(#8b6bff,#6b46fc);transform:scaleY(0);transform-origin:bottom}
.barras i:nth-child(6){background:linear-gradient(#e3a7f0,#c04bd8)}
/* las barras crecen al aparecer y después suben y bajan, cada una a su ritmo, como datos en vivo */
.ide-demo.app .barras i{transform:scaleY(1);animation:barraCrece .6s cubic-bezier(.3,1.4,.5,1) var(--d) both,barraVive var(--dur) ease-in-out calc(var(--d) + .6s) infinite alternate}
@keyframes barraCrece{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes barraVive{from{transform:scaleY(1)}to{transform:scaleY(var(--min))}}
.app-tabla .r{display:grid;grid-template-columns:1fr auto 15cqw;align-items:center;gap:1.4cqw;padding:.85cqw 0;border-top:1px solid #eef0f4;font-size:1.55cqw;
  opacity:0;transform:translateY(.8cqw);transition:opacity .4s,transform .4s}
.app-tabla small + .r{border-top:0;margin-top:.6cqw}
.ide-demo.app .app-tabla .r{opacity:1;transform:none}
.app-tabla .r span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-tabla .r b{font-weight:600;font-variant-numeric:tabular-nums}
.app-tabla .r em{font-style:normal;justify-self:start;border-radius:99px;padding:.3cqw 1.2cqw;font-size:1.4cqw;font-weight:600}
.app-tabla .r em.ok{background:#e7f8ee;color:#15803d}
.app-tabla .r em.ojo{background:#fdf3e2;color:#b26b12}
@media (prefers-reduced-motion: reduce){.ide-app,.barras i,.app-tabla .r,.ide-demo .ide-cuerpo{transition:none}.ide-demo.app .barras i{animation:none}}

/* angosto (celular): sin explorador, letra más grande */
@container (max-width:460px){
  .ide-cuerpo{grid-template-columns:1fr 34cqw}
  .ide-act,.ide-arbol{display:none}
  .ide-codigo{font-size:2.15cqw}
  .ide-codigo .n{width:5.5cqw}
  .ide-agente,.ide-pestanas{font-size:2.05cqw}
  .app-cuerpo{grid-template-columns:7cqw 1fr}
  .app-menu{padding:2cqw 1cqw}
  .app-menu span{font-size:0;justify-content:center;padding:1cqw .4cqw}
  .app-menu svg{width:3.2cqw;height:3.2cqw}
  .app-top .buscar{display:none}
  .ide-app{font-size:2.1cqw}
  .app-kpis small,.app-graf small,.app-tabla small,.app-tabla .r{font-size:1.9cqw}
  .app-kpis em,.app-tabla .r em{font-size:1.7cqw}
  .app-fila{grid-template-columns:1fr}
  .app-graf{display:none}
  .app-tabla .r{grid-template-columns:1fr auto 17cqw}
}