@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Space+Mono:wght@400;700&display=swap");:root{--bg-0:#ffffff;--bg-1:#f5f5f5;--bg-2:#ebebeb;--bg-3:#e0e0e0;--bg-hover:#d6d6d6;--border:#d6d6d6;--border-focus:#ff7700;--text-0:#111111;--text-1:#333333;--text-2:#555555;--text-3:#777777;--green:#ff6600;--green-dim:#e65c00;--green-glow:rgba(255,102,0,0.15);--green-glow-strong:rgba(255,102,0,0.3);--amber:#888888;--amber-dim:#666666;--amber-glow:rgba(136,136,136,0.15);--red:#444444;--red-dim:#222222;--red-glow:rgba(68,68,68,0.15);--cyan:#555555;--cyan-dim:#333333;--cyan-glow:rgba(85,85,85,0.15);--pink:#777777;--blue-light:#aaaaaa;--robot-body:#666666;--robot-body-dark:#333333;--font-mono:"IBM Plex Mono","JetBrains Mono","Fira Code","Consolas",monospace;--font-display:"Space Mono",monospace;--header-h:44px;--toolbar-h:40px;--bottom-h:150px;--r-sm:4px;--r-md:8px;--t-fast:0.15s ease;--t-normal:0.25s ease}@media (prefers-color-scheme:dark){:root{--bg-0:#0a0a0a;--bg-1:#141414;--bg-2:#1e1e1e;--bg-3:#282828;--bg-hover:#333333;--border:#2a2a2a;--border-focus:#ff7700;--text-0:#ffffff;--text-1:#cccccc;--text-2:#999999;--text-3:#666666;--robot-body:#888888;--robot-body-dark:#555555}}*,:after,:before{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;width:100%;overflow:hidden;font-family:var(--font-mono);font-size:13px;background:var(--bg-0);color:var(--text-0);-webkit-font-smoothing:antialiased}::selection{background:var(--green-glow-strong);color:var(--green)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-0)}::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-3)}.app{display:flex;flex-direction:column;height:100vh;width:100vw}.header{height:var(--header-h);background:var(--bg-1);border-bottom:1px solid var(--border);justify-content:space-between;padding:0 16px;flex-shrink:0;z-index:10}.header,.header__logo{display:flex;align-items:center}.header__logo{gap:8px}.header__logo-text{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--green);letter-spacing:-.5px;text-shadow:0 0 12px var(--green-glow)}.header__logo-slash,.header__logo-version{color:var(--text-3);font-weight:400}.header__logo-version{font-size:10px;border:1px solid var(--border);padding:1px 6px;border-radius:2px}.header__actions{display:flex}.btn,.header__actions{align-items:center;gap:6px}.btn{display:inline-flex;padding:5px 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:transparent;color:var(--text-1);font-family:var(--font-mono);font-size:12px;font-weight:500;cursor:pointer;transition:all var(--t-fast);white-space:nowrap}.btn:hover{background:var(--bg-hover);color:var(--text-0);border-color:var(--text-3)}.btn:active{transform:scale(.97)}.btn--green{border-color:var(--green-dim);color:var(--green)}.btn--green:hover{background:var(--green-glow);box-shadow:0 0 16px var(--green-glow)}.btn--red{border-color:var(--red-dim);color:var(--red)}.btn--red:hover{background:var(--red-glow)}.btn--amber{border-color:var(--amber-dim);color:var(--amber)}.btn--amber:hover{background:var(--amber-glow)}.btn--cyan{border-color:var(--cyan-dim);color:var(--cyan)}.btn--cyan:hover{background:var(--cyan-glow)}.main{overflow:hidden}.editor-panel,.main{flex:1 1;display:flex}.editor-panel{flex-direction:column;min-width:300px;border-right:1px solid var(--border)}.panel-label{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--bg-1);border-bottom:1px solid var(--border);font-size:11px;color:var(--text-2);font-weight:500;text-transform:uppercase;letter-spacing:1px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.panel-label__dot{width:6px;height:6px;border-radius:50%;background:var(--green-dim);box-shadow:0 0 6px var(--green-glow)}.panel-label__dot--amber{background:var(--amber);box-shadow:0 0 6px var(--amber-glow)}.panel-label__dot--red{background:var(--red);box-shadow:0 0 6px var(--red-glow)}.editor-panel__content{flex:1 1;overflow:auto;background:var(--bg-2);position:relative}.editor-textarea{width:100%;height:100%;background:transparent;color:var(--text-0);border:none;outline:none;resize:none;padding:12px 16px;font-family:var(--font-mono);font-size:13px;line-height:1.75;-moz-tab-size:2;tab-size:2;caret-color:var(--green)}.editor-textarea::placeholder{color:var(--text-3);font-style:italic}.editor-textarea:focus{background:var(--bg-2)}.city-panel{flex:1 1;display:flex;flex-direction:column;min-width:300px}.city-panel__content{flex:1 1;overflow:hidden;background:var(--bg-0);display:flex;align-items:center;justify-content:center;position:relative}.city-canvas{image-rendering:pixelated}.robot-bar{padding:6px 12px;background:var(--bg-1);border-top:1px solid var(--border);gap:16px;font-size:11px;overflow-x:auto}.robot-bar,.robot-bar__item{display:flex;align-items:center}.robot-bar__item{gap:3px;color:var(--text-2);white-space:nowrap}.robot-bar__val{color:var(--cyan);font-weight:600}.toolbar{height:var(--toolbar-h);background:var(--bg-1);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:4px;flex-shrink:0}.toolbar__sep{width:1px;height:20px;background:var(--border);margin:0 6px}.toolbar__speed{display:flex;align-items:center;gap:6px;margin-left:4px}.toolbar__speed-label{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}.toolbar__speed-slider{width:80px;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bg-3);border-radius:2px;outline:none;cursor:pointer}.toolbar__speed-slider::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--green);cursor:pointer;box-shadow:0 0 8px var(--green-glow)}.toolbar__line-indicator{margin-left:auto;font-size:11px;color:var(--green-dim)}.toolbar__zoom{display:flex;align-items:center;gap:4px}.toolbar__zoom-level{font-size:11px;font-family:var(--font-mono);color:var(--green-dim);min-width:24px;text-align:center}.btn--small{padding:2px 8px;font-size:13px;min-width:24px;line-height:1;border:1px solid var(--border);background:var(--bg-2);color:var(--text-2);border-radius:3px;cursor:pointer;transition:all .15s}.btn--small:hover{background:var(--bg-3);color:var(--green);border-color:var(--green)}.btn--green{background:var(--green);color:var(--bg-0);border-color:var(--green)}.btn--green:hover{background:var(--green-dim);border-color:var(--green-dim)}.bottom-panel{height:var(--bottom-h);background:var(--bg-1);border-top:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}.bottom-panel__tabs{display:flex;border-bottom:1px solid var(--border)}.tab-btn{padding:5px 14px;font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--text-3);cursor:pointer;border:none;border-bottom:2px solid transparent;background:none;transition:all var(--t-fast);text-transform:uppercase;letter-spacing:.5px}.tab-btn:hover{color:var(--text-1)}.tab-btn--active{color:var(--green);border-bottom-color:var(--green)}.bottom-panel__content{flex:1 1;overflow:auto;padding:6px 12px;font-size:12px;line-height:1.7}.city-config-editor{width:100%;height:100%;background:var(--bg-0);color:var(--text-0);font-family:var(--font-mono);font-size:12px;line-height:1.7;border:none;resize:none;outline:none;padding:0}.city-config-editor::placeholder{color:var(--text-3)}.out{display:flex;align-items:flex-start;gap:8px;padding:1px 0}.out--ok{color:var(--green)}.out--err{color:var(--red)}.out--warn{color:var(--amber)}.out--info{color:var(--text-1)}.out__prefix{flex-shrink:0;width:14px;font-weight:700}.out__hint{display:block;margin-top:1px;font-size:11px;color:var(--amber-dim);font-style:italic}.robot-hero{display:flex;flex-direction:column;align-items:center;gap:12px;animation:float 3s ease-in-out infinite}.robot-hero__text{font-size:12px;color:var(--text-3);font-style:italic;letter-spacing:.5px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.robot{transition:transform .3s ease}.robot--moving .robot__track-left,.robot--moving .robot__track-right{animation:trackSpin .3s linear infinite}.robot--happy .robot__body{animation:happyBounce .4s ease}.robot--sad .robot__head{animation:sadShake .5s ease}@keyframes trackSpin{0%{opacity:1}50%{opacity:.6}to{opacity:1}}@keyframes happyBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}@keyframes sadShake{0%,to{transform:translateX(0)}25%{transform:translateX(-1px)}75%{transform:translateX(1px)}}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .15s ease}.modal{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-md);width:520px;max-width:90vw;max-height:80vh;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.6);animation:slideUp .2s ease}.modal__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}.modal__title{font-size:13px;font-weight:600;color:var(--text-0);text-transform:uppercase;letter-spacing:.5px}.modal__close{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);background:transparent;color:var(--text-2);border-radius:var(--r-sm);cursor:pointer;font-size:14px;font-family:var(--font-mono)}.modal__close:hover{background:var(--bg-hover);color:var(--text-0)}.modal__body{padding:12px 16px;overflow-y:auto;max-height:60vh}.example-item{padding:10px 14px;border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:6px;cursor:pointer;transition:all var(--t-fast)}.example-item:hover{border-color:var(--green-dim);background:var(--green-glow)}.example-item__title{font-size:13px;font-weight:600;color:var(--text-0);margin-bottom:3px}.example-item__desc{font-size:11px;color:var(--text-2)}.example-item__tag{display:inline-block;font-size:10px;padding:1px 8px;border-radius:2px;border:1px solid var(--border);color:var(--text-2);margin-top:5px;text-transform:uppercase;letter-spacing:.5px}.example-item__tag--basico{color:var(--green-dim);border-color:var(--green-dim)}.example-item__tag--intermedio{color:var(--amber);border-color:var(--amber-dim)}.example-item__tag--avanzado{color:var(--red);border-color:var(--red-dim)}.input-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:200}.input-modal{background:var(--bg-1);border:1px solid var(--green-dim);border-radius:var(--r-md);padding:20px;box-shadow:0 0 24px var(--green-glow);text-align:center;width:300px;animation:slideUp .2s ease}.input-modal__title{font-size:12px;color:var(--text-1);margin-bottom:10px}.input-modal__input{width:100%;padding:8px 12px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--green);font-family:var(--font-mono);font-size:16px;text-align:center;outline:none;caret-color:var(--green)}.input-modal__input:focus{border-color:var(--green-dim);box-shadow:0 0 0 2px var(--green-glow)}.input-modal__submit{margin-top:10px;padding:6px 20px;background:var(--green-dim);color:var(--bg-0);border:none;border-radius:var(--r-sm);font-family:var(--font-mono);font-size:12px;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:.5px;transition:all var(--t-fast)}.input-modal__submit:hover{background:var(--green);box-shadow:0 0 16px var(--green-glow)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}.status-dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:4px}.status-dot--running{background:var(--green);box-shadow:0 0 8px var(--green-glow);animation:pulse 1s ease-in-out infinite}.status-dot--paused{background:var(--amber);box-shadow:0 0 8px var(--amber-glow)}.status-dot--error{background:var(--red);box-shadow:0 0 8px var(--red-glow)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@media (max-width:1024px){.main{flex-direction:column}.editor-panel{border-right:none;border-bottom:1px solid var(--border)}.city-panel,.editor-panel{min-width:0;flex:1 1}}@media (max-width:768px){.header{padding:0 10px}.header__logo-text{font-size:13px}.main{position:relative}.city-panel,.editor-panel{position:absolute;inset:0;border:none;transition:opacity .2s ease,visibility .2s ease}.city-panel.panel--hidden,.editor-panel.panel--hidden{opacity:0;visibility:hidden;pointer-events:none}.toolbar{flex-wrap:wrap;height:auto;padding:6px 10px;gap:4px}.toolbar__speed{display:none}.bottom-panel{height:120px}.btn{padding:6px 10px;font-size:11px}.mobile-tabs{display:flex;background:var(--bg-1);border-bottom:1px solid var(--border)}.mobile-tab{flex:1 1;padding:8px;text-align:center;font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text-3);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;text-transform:uppercase;letter-spacing:1px}.mobile-tab--active{color:var(--green);border-bottom-color:var(--green)}}@media (min-width:769px){.mobile-tabs{display:none}}