/* Claude hoy, versión gráfica: ventana de Claude simulada con el foco en cada paso */
.ch{display:grid;grid-template-columns:300px 1fr;gap:22px;margin-top:18px;align-items:start}
.ch-pasos{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.ch-pasos li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid transparent;cursor:pointer;transition:background .4s,border-color .4s}
.ch-pasos li span{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--tt);font-weight:500;font-size:18px;background:rgba(255,255,255,.08);color:var(--muted);transition:background .4s,color .4s}
.ch-pasos li b{font-family:var(--tt);font-weight:500;font-size:21px;letter-spacing:-.02em}
.ch-pasos li.on{background:rgba(46,211,198,.12);border-color:rgba(46,211,198,.5)}
.ch-pasos li.on span{background:#2ED3C6;color:#000}
.ch-pasos li.ya span{background:rgba(46,211,198,.3);color:#E8FBF9}
.ch-win{position:relative;height:430px;border-radius:18px;background:#0E0E11;border:1px solid rgba(255,255,255,.14);overflow:hidden;box-shadow:0 40px 90px -40px rgba(46,211,198,.45),0 30px 60px -30px rgba(0,0,0,.9)}
.ch-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035)}
.ch-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.ch-bar span{margin-left:8px;font-size:17px;color:var(--faint)}
.ch-bar em{margin-left:auto;font-style:normal;font-size:17px;color:#6E6E76}
.ch-cuerpo{position:relative;display:grid;grid-template-columns:200px 1fr 0px;height:calc(100% - 34px);transition:grid-template-columns .7s var(--ease)}
.ch-win:is([data-paso="2"],[data-paso="3"],[data-paso="4"],[data-paso="5"]) .ch-cuerpo{grid-template-columns:200px 1fr 390px}
.ch-lat{padding:12px 10px;border-right:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:4px;font-size:17px}
.ch-nuevo{padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.07);color:#E8E8ED;margin-bottom:6px}
.ch-sec{margin-top:8px;font-size:17px;color:#6E6E76}
.ch-it{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:9px;color:#C9C9CF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-it i{flex:none;width:8px;height:8px;border-radius:2px;background:rgba(255,255,255,.3)}
.ch-it.tenue{color:#7A7A82}
.ch-artlink{opacity:.25;transition:opacity .5s}
.ch-artlink.chv{opacity:1;color:#5BE0D3}
.ch-main{position:relative;display:flex;flex-direction:column;min-width:0}
.ch-cab{display:flex;align-items:baseline;gap:10px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.ch-cab b{font-family:var(--tt);font-weight:500;font-size:19px}
.ch-cab span{font-size:17px;color:var(--faint)}
.ch-hilo{flex:1;display:flex;flex-direction:column;gap:8px;padding:12px 16px;overflow:hidden}
.ch-msg{max-width:92%;padding:7px 12px;border-radius:14px;font-size:17px;line-height:1.35;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--ease)}
.ch-msg.chv{opacity:1;transform:none}
.ch-msg.u{align-self:flex-end;background:rgba(255,255,255,.1);border-bottom-right-radius:4px}
.ch-msg.a{background:rgba(46,211,198,.1);border:1px solid rgba(46,211,198,.28);border-bottom-left-radius:4px}
.ch-input{display:flex;align-items:center;gap:10px;margin:10px 14px 12px;padding:8px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03)}
.ch-mas{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);font-size:20px;color:#E8E8ED}
.ch-ph{flex:1;font-size:17px;color:#6E6E76;white-space:nowrap;overflow:hidden}
.ch-modelo{flex:none;padding:4px 10px;border-radius:9px;font-size:17px;color:#C9C9CF;background:rgba(255,255,255,.06);white-space:nowrap}
.ch-env{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#2ED3C6;color:#000;font-weight:700}
.ch-art{position:relative;border-left:1px solid rgba(255,255,255,.08);background:#F6F6F7;color:#1c1c1f;overflow:hidden;opacity:0;transition:opacity .6s}
.ch-art.chv{opacity:1}
.ch-art-bar{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid #e1e1e6;background:#fff}
.ch-art-bar b{flex:1;font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-menu{padding:0 8px;border-radius:7px;font-size:20px;line-height:1.2;color:#555}
.ch-share{padding:4px 12px;border-radius:8px;background:#111;color:#fff;font-size:17px}
.ch-art-cuerpo{position:relative;height:calc(100% - 44px);padding:14px}
.ch-app-t{height:14px;width:55%;border-radius:4px;background:#10343C;margin-bottom:12px}
.ch-fila{display:flex;align-items:center;gap:10px;padding:9px 10px;margin-bottom:7px;border-radius:9px;background:#fff;border:1px solid #e6e6ea}
.ch-fila i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c)}
.ch-fila u{height:8px;border-radius:4px;background:#d9d9de;text-decoration:none}
.ch-fila em{margin-left:auto;font-style:normal;font-size:17px;color:#00897f}
.ch-err{position:absolute;left:14px;right:14px;bottom:-110px;display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:10px;background:#FFF1EF;border:1px solid #FFB3AA;color:#9b1c13;font-size:17px;transition:bottom .6s var(--ease)}
.ch-err.chv{bottom:14px}
.ch-err span{align-self:flex-start;padding:4px 12px;border-radius:8px;background:#9b1c13;color:#fff}
.ch-drop{position:absolute;right:58px;top:40px;display:grid;padding:6px;border-radius:10px;background:#fff;border:1px solid #d9d9de;box-shadow:0 16px 40px -12px rgba(0,0,0,.4);font-size:17px;opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s var(--ease)}
.ch-drop.chv{opacity:1;transform:none}
.ch-drop span,.ch-drop b{padding:6px 14px;border-radius:7px}
.ch-drop b{background:#E3F6F4;color:#0b4e48;font-weight:600}
.ch-file{position:absolute;left:14px;bottom:14px;padding:8px 14px;border-radius:10px;background:#10343C;color:#BDF3EE;font-size:17px;opacity:0;transform:translateY(10px);transition:opacity .5s .3s,transform .5s .3s var(--ease)}
.ch-file.chv{opacity:1;transform:none}
.ch-dlg{position:absolute;left:16px;right:16px;top:56px;display:grid;gap:8px;padding:14px;border-radius:12px;background:#fff;border:1px solid #d9d9de;box-shadow:0 20px 50px -14px rgba(0,0,0,.45);font-size:17px;opacity:0;transform:scale(.96);transition:opacity .4s,transform .4s var(--ease)}
.ch-dlg.chv{opacity:1;transform:none}
.ch-dlg .op{padding:7px 10px;border-radius:8px;border:1px solid #e1e1e6}
.ch-dlg .op.on{border-color:#00B0A5;background:#E3F6F4}
.ch-dlg .perm{display:flex;gap:6px;flex-wrap:wrap}
.ch-dlg .perm span{padding:4px 10px;border-radius:999px;background:#f1f1f3}
.ch-proypanel{position:absolute;left:200px;top:0;bottom:0;width:340px;padding:14px 16px;background:#141418;border-right:1px solid rgba(46,211,198,.4);display:flex;flex-direction:column;gap:6px;font-size:17px;opacity:0;transform:translateX(-14px);transition:opacity .5s,transform .5s var(--ease);pointer-events:none}
.ch-proypanel.chv{opacity:1;transform:none}
.ch-proypanel b{font-family:var(--tt);font-weight:500;font-size:22px}
.ch-proypanel small{margin-top:6px;font-size:17px;color:var(--muted)}
.ch-proypanel .doc{padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.06);color:#E8E8ED}
.ch-proypanel p{color:#BDF3EE;line-height:1.35}
.ch [data-z]{transition:box-shadow .4s,outline-color .4s}
.ch [data-z].foco{outline:2px solid #2ED3C6;outline-offset:3px;box-shadow:0 0 0 7px rgba(46,211,198,.18),0 0 28px rgba(46,211,198,.55);animation:latido 1.6s ease-in-out infinite}
.ch-cap{margin-top:14px;font-size:21px;line-height:1.4;color:#E5E5EA}
.ch-cap b{font-family:var(--tt);font-weight:500;color:#5BE0D3;margin-right:10px}