Maqueta de layout para UI con mockup data, actualizo a ultimas versiones todas las dependencias de los package.json

backend/package.json

@@ -14,13 +14,13 @@
     "db:studio": "prisma studio"
   },
   "dependencies": {
-    "express": "^4.21.0",
-    "socket.io": "^4.8.0",
-    "node-cron": "^3.0.3",
-    "@prisma/client": "^6.0.0",
-    "prisma": "^6.0.0"
+    "express": "^5.2.1",
+    "socket.io": "^4.8.3",
+    "node-cron": "^4.2.1",
+    "@prisma/client": "^7.8.0",
+    "prisma": "^7.8.0"
   },
   "engines": {
-    "node": ">=22.0.0"
+    "node": ">=26.0.0"
   }
 }

frontend/dist/assets/index-CIGW-MKW.css

@@ -1 +0,0 @@
-.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-tile::selection{background:transparent}.leaflet-safari .leaflet-tile{image-rendering:-webkit-optimize-contrast}.leaflet-safari .leaflet-tile-container{width:1600px;height:1600px;-webkit-transform-origin:0 0}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container .leaflet-overlay-pane svg{max-width:none!important;max-height:none!important}.leaflet-container .leaflet-marker-pane img,.leaflet-container .leaflet-shadow-pane img,.leaflet-container .leaflet-tile-pane img,.leaflet-container img.leaflet-image-layer,.leaflet-container .leaflet-tile{max-width:none!important;max-height:none!important;width:auto;padding:0}.leaflet-container img.leaflet-tile{mix-blend-mode:plus-lighter}.leaflet-container.leaflet-touch-zoom{-ms-touch-action:pan-x pan-y;touch-action:pan-x pan-y}.leaflet-container.leaflet-touch-drag{-ms-touch-action:pinch-zoom;touch-action:none;touch-action:pinch-zoom}.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{-ms-touch-action:none;touch-action:none}.leaflet-container{-webkit-tap-highlight-color:transparent}.leaflet-container a{-webkit-tap-highlight-color:rgba(51,181,229,.4)}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0;-moz-box-sizing:border-box;box-sizing:border-box;z-index:800}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg{z-index:200}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:800;pointer-events:visiblePainted;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-animated{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}svg.leaflet-zoom-animated{will-change:transform}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,.25,1);-moz-transition:-moz-transform .25s cubic-bezier(0,0,.25,1);transition:transform .25s cubic-bezier(0,0,.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile{-webkit-transition:none;-moz-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-interactive{cursor:pointer}.leaflet-grab{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.leaflet-crosshair,.leaflet-crosshair .leaflet-interactive{cursor:crosshair}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-grab,.leaflet-dragging .leaflet-grab .leaflet-interactive,.leaflet-dragging .leaflet-marker-draggable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-image-layer,.leaflet-pane>svg path,.leaflet-tile-container{pointer-events:none}.leaflet-marker-icon.leaflet-interactive,.leaflet-image-layer.leaflet-interactive,.leaflet-pane>svg path.leaflet-interactive,svg.leaflet-image-layer.leaflet-interactive path{pointer-events:visiblePainted;pointer-events:auto}.leaflet-container{background:#ddd;outline-offset:1px}.leaflet-container a{color:#0078a8}.leaflet-zoom-box{border:2px dotted #38f;background:#ffffff80}.leaflet-container{font-family:Helvetica Neue,Arial,Helvetica,sans-serif;font-size:12px;font-size:.75rem;line-height:1.5}.leaflet-bar{box-shadow:0 1px 5px #000000a6;border-radius:4px}.leaflet-bar a{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:#000}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover,.leaflet-bar a:focus{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-touch .leaflet-bar a:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.leaflet-touch .leaflet-bar a:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:700 18px Lucida Console,Monaco,monospace;text-indent:1px}.leaflet-touch .leaflet-control-zoom-in,.leaflet-touch .leaflet-control-zoom-out{font-size:22px}.leaflet-control-layers{box-shadow:0 1px 5px #0006;background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-scrollbar{overflow-y:scroll;overflow-x:hidden;padding-right:5px}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block;font-size:13px;font-size:1.08333em}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-default-icon-path{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=)}.leaflet-container .leaflet-control-attribution{background:#fff;background:#fffc;margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333;line-height:1.4}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover,.leaflet-control-attribution a:focus{text-decoration:underline}.leaflet-attribution-flag{display:inline!important;vertical-align:baseline!important;width:1em;height:.6669em}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;white-space:nowrap;-moz-box-sizing:border-box;box-sizing:border-box;background:#fffc;text-shadow:1px 1px #fff}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center;margin-bottom:20px}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 24px 13px 20px;line-height:1.3;font-size:13px;font-size:1.08333em;min-height:1px}.leaflet-popup-content p{margin:1.3em 0}.leaflet-popup-tip-container{width:40px;height:20px;position:absolute;left:50%;margin-top:-1px;margin-left:-20px;overflow:hidden;pointer-events:none}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;pointer-events:auto;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#fff;color:#333;box-shadow:0 3px 14px #0006}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;border:none;text-align:center;width:24px;height:24px;font:16px/24px Tahoma,Verdana,sans-serif;color:#757575;text-decoration:none;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover,.leaflet-container a.leaflet-popup-close-button:focus{color:#585858}.leaflet-popup-scrolled{overflow:auto}.leaflet-oldie .leaflet-popup-content-wrapper{-ms-zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";filter:progid:DXImageTransform.Microsoft.Matrix(M11=.70710678,M12=.70710678,M21=-.70710678,M22=.70710678)}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666}.leaflet-tooltip{position:absolute;padding:6px;background-color:#fff;border:1px solid #fff;border-radius:3px;color:#222;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;box-shadow:0 1px 3px #0006}.leaflet-tooltip.leaflet-interactive{cursor:pointer;pointer-events:auto}.leaflet-tooltip-top:before,.leaflet-tooltip-bottom:before,.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{position:absolute;pointer-events:none;border:6px solid transparent;background:transparent;content:""}.leaflet-tooltip-bottom{margin-top:6px}.leaflet-tooltip-top{margin-top:-6px}.leaflet-tooltip-bottom:before,.leaflet-tooltip-top:before{left:50%;margin-left:-6px}.leaflet-tooltip-top:before{bottom:0;margin-bottom:-12px;border-top-color:#fff}.leaflet-tooltip-bottom:before{top:0;margin-top:-12px;margin-left:-6px;border-bottom-color:#fff}.leaflet-tooltip-left{margin-left:-6px}.leaflet-tooltip-right{margin-left:6px}.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{top:50%;margin-top:-6px}.leaflet-tooltip-left:before{right:0;margin-right:-12px;border-left-color:#fff}.leaflet-tooltip-right:before{left:0;margin-left:-12px;border-right-color:#fff}@media print{.leaflet-control{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

frontend/dist/assets/index-xtYPhhTl.css

@@ -0,0 +1 @@
+@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@400;500;600;700&display=swap";:root{--bg:#0a0c10;--bg2:#111318;--bg3:#181c24;--bg4:#1e232d;--border:#ffffff14;--border2:#ffffff21;--text:#e8eaf0;--text2:#8b90a0;--text3:#555b6e;--green:#22d37a;--green2:#0d6e3a;--green3:#052a17;--red:#f04040;--red2:#7a1a1a;--red3:#2d0808;--blue:#4a9eff;--blue2:#1a4a80;--blue3:#081830;--amber:#f0a020;--amber2:#7a4e08;--amber3:#2d1c02;--accent:#4a9eff;--sidebar-width:240px;--sidebar-collapsed:56px;--topbar-height:56px;--panel-gap:16px;--radius:10px;--radius-sm:6px;--fs-p:clamp(16px, 1.15vw, 18px);--fs-h1:clamp(28px, 2.8vw, 36px);--fs-h2:clamp(24px, 2.4vw, 30px);--fs-h3:clamp(20px, 1.9vw, 24px);--fs-h4:clamp(18px, 1.6vw, 20px);--fs-h5:clamp(16px, 1.3vw, 18px);--fs-h6:clamp(14px, 1.1vw, 16px)}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{width:100%;height:100%;overflow:hidden}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Syne,sans-serif;font-size:16px;line-height:1.5}p{font-size:var(--fs-p);line-height:1.55}h1{font-size:var(--fs-h1);font-weight:700;line-height:1.15}h2{font-size:var(--fs-h2);font-weight:700;line-height:1.2}h3{font-size:var(--fs-h3);font-weight:600;line-height:1.25}h4{font-size:var(--fs-h4);font-weight:600;line-height:1.3}h5{font-size:var(--fs-h5);font-weight:500;line-height:1.35}h6{font-size:var(--fs-h6);font-weight:500;line-height:1.4}.layout{grid-template-areas:"topbar topbar""sidebar main";grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:var(--topbar-height) 1fr;width:100vw;height:100vh;transition:grid-template-columns .25s;display:grid}.layout.collapsed{grid-template-columns:var(--sidebar-collapsed) 1fr}.sidebar{background:var(--bg2);border-right:1px solid var(--border);flex-direction:column;grid-area:sidebar;transition:width .25s;display:flex;position:relative;overflow:hidden}.sidebar-toggle{background:var(--bg3);border:1px solid var(--border2);width:24px;height:24px;color:var(--text2);cursor:pointer;z-index:10;border-radius:50%;justify-content:center;align-items:center;font-size:14px;transition:transform .2s;display:flex;position:absolute;top:12px;right:-10px}.layout.collapsed .sidebar-toggle{right:-10px;transform:rotate(180deg)}.topbar-logo{align-items:center;gap:10px;display:flex;position:absolute;top:0;bottom:0;left:16px}.topbar-logo .logo-dot{background:var(--blue);border-radius:50%;flex-shrink:0;width:10px;height:10px;animation:2s ease-in-out infinite pulse}.topbar-logo .logo-text{color:var(--text);letter-spacing:-.3px;white-space:nowrap;font-size:18px;font-weight:700}.sidebar-nav{flex-direction:column;flex:1;gap:4px;padding:14px 8px;display:flex;overflow-y:auto}.nav-item{border-radius:var(--radius-sm);cursor:pointer;color:var(--text2);white-space:nowrap;align-items:center;gap:14px;padding:14px;font-size:16px;font-weight:500;transition:background .15s,color .15s;display:flex;overflow:hidden}.nav-item:hover{background:var(--bg3);color:var(--text)}.nav-item.active{background:var(--blue3);color:var(--blue);border:.5px solid var(--blue2)}.nav-icon{text-align:center;flex-shrink:0;width:20px;font-size:16px}.nav-label{opacity:1;transition:opacity .15s}.layout.collapsed .nav-label{opacity:0;width:0}.sidebar-footer{border-top:1px solid var(--border);color:var(--text3);text-align:center;white-space:nowrap;padding:14px;font-family:DM Mono,monospace;font-size:14px;overflow:hidden}.layout.collapsed .sidebar-footer{opacity:0}.topbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:0 16px;padding-left:calc(var(--sidebar-width) + var(--panel-gap));grid-area:topbar;align-items:center;gap:16px;transition:padding-left .25s;display:flex;position:relative;overflow:hidden}.layout.collapsed .topbar{padding-left:calc(var(--sidebar-collapsed) + var(--panel-gap))}.live-badge{background:var(--green3);color:var(--green);border:.5px solid var(--green2);border-radius:4px;flex-shrink:0;align-items:center;gap:4px;padding:6px 12px;font-family:DM Mono,monospace;font-size:14px;display:flex}.live-dot{background:var(--green);border-radius:50%;width:8px;height:8px;animation:1.5s ease-in-out infinite pulse}.topbar-stats{flex:1;align-items:center;gap:20px;display:flex;overflow:hidden}.stat{flex-shrink:0;align-items:center;gap:14px;display:flex}.stat-label{color:var(--text3);text-transform:uppercase;letter-spacing:.06em;font-family:DM Mono,monospace;font-size:14px}.stat-val{color:var(--text);font-family:DM Mono,monospace;font-size:16px;font-weight:600}.stat-delta{font-family:DM Mono,monospace;font-size:14px}.stat-delta.up{color:var(--green)}.stat-delta.dn{color:var(--red)}.stat-delta.neutral{color:var(--text3)}.topbar-actions{flex-shrink:0;align-items:center;gap:16px;margin-left:auto;display:flex}.btn-ghost{color:var(--blue);border:.5px solid var(--blue2);background:var(--blue3);border-radius:var(--radius-sm);cursor:pointer;padding:8px 16px;font-family:Syne,sans-serif;font-size:15px;font-weight:500;transition:opacity .15s}.btn-ghost:hover{opacity:.85}.icon-btn{background:var(--bg3);border:.5px solid var(--border2);width:32px;height:32px;color:var(--text2);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-size:16px;transition:color .15s,border-color .15s;display:flex}.icon-btn:hover{color:var(--text);border-color:var(--border2)}.main{padding:var(--panel-gap);background:var(--bg);grid-area:main;overflow:auto}.view{display:none}.view.active{height:100%;display:block}.dashboard-grid{gap:var(--panel-gap);grid-template-rows:1fr minmax(280px,40%);grid-template-columns:1fr 280px;height:100%;min-height:0;display:grid}.panel{background:var(--bg2);border:.5px solid var(--border);border-radius:var(--radius);flex-direction:column;min-height:0;display:flex;overflow:hidden}.panel-header{border-bottom:.5px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding:14px;transition:background .15s;display:flex}.panel-header:hover{background:#ffffff05}.panel-title{color:var(--text3);text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:14px;font-family:DM Mono,monospace;font-size:14px;display:flex}.panel-toggle{color:var(--text3);font-size:14px;transition:transform .2s}.panel.collapsed .panel-toggle{transform:rotate(-90deg)}.panel-body{flex:1;min-height:0;padding:12px;overflow:auto}.panel.collapsed .panel-body{display:none}.panel-subtitle{color:var(--text3);font-size:14px}.positions-separator{border-top:.5px solid var(--border);margin-top:10px;padding-top:10px}.panel-title.mb-sm{margin-bottom:8px}.panel.full-height{height:100%}.hidden{display:none}.map-panel{grid-area:1/1/2/2}#map-container{background:var(--bg3);border-radius:var(--radius-sm);width:100%;height:100%;min-height:300px;overflow:hidden}.signals-panel{grid-area:1/2/3/3}.signals-list{flex-direction:column;gap:16px;display:flex}.market-card{background:var(--bg3);border:.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;padding:14px;transition:border-color .15s,background .15s}.market-card:hover{border-color:var(--border2)}.market-card.active{border-color:var(--blue2);background:var(--blue3)}.market-cat{color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;font-family:DM Mono,monospace;font-size:14px}.market-q{color:var(--text);margin-bottom:8px;font-size:15px;font-weight:500;line-height:1.4}.market-footer{justify-content:space-between;align-items:center;gap:16px;display:flex}.prob-bar-wrap{flex:1;min-width:0}.prob-bar-bg{background:var(--bg4);border-radius:2px;height:5px;overflow:hidden}.prob-bar-fill{height:100%;width:var(--prob-width,0%);border-radius:2px;transition:width .8s}.prob-val{flex-shrink:0;font-family:DM Mono,monospace;font-size:15px;font-weight:600}.signal-badge{letter-spacing:.04em;border-radius:4px;flex-shrink:0;padding:2px 6px;font-family:DM Mono,monospace;font-size:14px;font-weight:600}.sig-bull{background:var(--green3);color:var(--green);border:.5px solid var(--green2)}.sig-bear{background:var(--red3);color:var(--red);border:.5px solid var(--red2)}.sig-neut{background:var(--bg4);color:var(--text2);border:.5px solid var(--border2)}.detail-panel{grid-area:2/1/3/2;max-height:100%;overflow:hidden}.detail-panel .panel-body{overflow-y:auto}.detail-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px;display:flex}.detail-tag{color:var(--blue);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;font-family:DM Mono,monospace;font-size:14px}.detail-q{color:var(--text);font-size:16px;font-weight:600;line-height:1.5}.detail-meta{color:var(--text3);margin-top:2px;font-family:DM Mono,monospace;font-size:14px}.detail-metrics{flex-shrink:0;align-items:center;gap:16px;display:flex}.metric{text-align:right}.metric-label{color:var(--text3);margin-bottom:2px;font-family:DM Mono,monospace;font-size:14px}.metric-value{font-family:DM Mono,monospace;font-size:14px;font-weight:700}.metric-sep{background:var(--border);width:1px;height:40px}.outcomes-row{gap:16px;margin-bottom:12px;display:flex}.outcome-card{background:var(--bg3);border:.5px solid var(--border);border-radius:var(--radius-sm);text-align:center;flex:1;padding:14px}.outcome-name{color:var(--text2);margin-bottom:4px;font-family:DM Mono,monospace;font-size:14px}.outcome-price{color:var(--text);font-family:DM Mono,monospace;font-size:20px;font-weight:700}.outcome-delta{margin-top:2px;font-family:DM Mono,monospace;font-size:14px}.outcome-card.yes .outcome-price{color:var(--green)}.outcome-card.no .outcome-price{color:var(--red)}.chart-container{background:var(--bg3);border:.5px solid var(--border);border-radius:var(--radius-sm);flex:2;height:160px;min-height:120px;max-height:160px;padding:14px;overflow:hidden}.chart-container canvas{max-height:130px}.chart-label{color:var(--text3);margin-bottom:6px;font-family:DM Mono,monospace;font-size:14px}.ai-box{background:var(--bg3);border:.5px solid var(--blue2);border-radius:var(--radius-sm);align-items:flex-start;gap:14px;margin-bottom:10px;padding:14px;display:flex}.ai-icon{background:var(--blue3);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;display:flex}.ai-label{color:var(--blue);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;font-family:DM Mono,monospace;font-size:14px}.ai-text{color:var(--text2);font-size:15px;line-height:1.5}.sim-row{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.sim-label{color:var(--text3);font-family:DM Mono,monospace;font-size:15px}.sim-input{background:var(--bg3);border:.5px solid var(--border2);border-radius:var(--radius-sm);color:var(--text);outline:none;width:100px;padding:8px 14px;font-family:DM Mono,monospace;font-size:16px}.sim-input:focus{border-color:var(--blue2)}.sim-btn-yes{background:var(--green3);border:.5px solid var(--green2);color:var(--green);border-radius:var(--radius-sm);cursor:pointer;padding:8px 16px;font-family:DM Mono,monospace;font-size:15px;font-weight:600;transition:opacity .15s}.sim-btn-no{background:var(--red3);border:.5px solid var(--red2);color:var(--red);border-radius:var(--radius-sm);cursor:pointer;padding:8px 16px;font-family:DM Mono,monospace;font-size:15px;font-weight:600;transition:opacity .15s}.sim-btn-yes:hover,.sim-btn-no:hover{opacity:.85}.sim-disclaimer{color:var(--text3);font-family:DM Mono,monospace;font-size:14px}.legend{align-items:center;gap:16px;display:flex}.legend-item{color:var(--text3);align-items:center;gap:5px;font-family:DM Mono,monospace;font-size:14px;display:flex}.legend-dot{border-radius:50%;width:10px;height:10px}.legend-dot.green{background:var(--green)}.legend-dot.red{background:var(--red)}.legend-dot.gray{background:var(--text3)}.legend.end{margin-left:auto}.table-wrap{border:.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg3);overflow:auto}table{border-collapse:collapse;width:100%;font-size:16px}th,td{text-align:left;border-bottom:.5px solid var(--border);padding:14px}th{color:var(--text3);text-transform:uppercase;letter-spacing:.06em;background:var(--bg4);font-family:DM Mono,monospace;font-size:14px;font-weight:500;position:sticky;top:0}tr:hover td{background:#ffffff05}td{color:var(--text)}.td-mono{font-family:DM Mono,monospace}.td-green{color:var(--green)}.td-red{color:var(--red)}.td-blue{color:var(--blue)}.empty-state{text-align:center;color:var(--text3);padding:40px;font-size:16px}#app .leaflet-container{background:var(--bg3);font-family:DM Mono,monospace}#app .leaflet-popup-content-wrapper{background:var(--bg2);color:var(--text);border:.5px solid var(--border);border-radius:var(--radius-sm)}#app .leaflet-popup-tip{background:var(--bg2)}.sparkline{align-items:flex-end;gap:2px;height:32px;margin-top:6px;display:flex}.spark-bar{background:var(--blue2);border-radius:1px;width:3px;transition:height .3s}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text3)}.flex-between{justify-content:space-between;align-items:center;display:flex}.flex-start{justify-content:space-between;align-items:flex-start;display:flex}.flex-row{align-items:center;display:flex}.flex-wrap{flex-wrap:wrap}.gap-6{gap:14px}.gap-8{gap:16px}.text-green{color:var(--green)}.text-red{color:var(--red)}.text-blue{color:var(--blue)}.text-amber{color:var(--amber)}.text-neutral{color:var(--text3)}.bg-green{background:var(--green)}.bg-red{background:var(--red)}.bg-amber{background:var(--amber)}.flex-1{flex:1}.font-mono{font-family:DM Mono,monospace}.text-xs,.text-sm{font-size:14px}.text-base{font-size:15px}.text-lg{font-size:16px}.text-xl{font-size:18px}.font-semibold{font-weight:600}.font-bold{font-weight:700}.mb-4{margin-bottom:4px}.mb-6{margin-bottom:6px}.mb-8{margin-bottom:8px}.mt-4{margin-top:4px}.mt-6{margin-top:6px}.ml-auto{margin-left:auto}.divider{background:var(--border);height:1px;margin:8px 0}.empty-state-sm{text-align:center;color:var(--text3);padding:16px;font-size:16px}.map-popup{color:var(--text);max-width:200px;font-family:Syne,sans-serif;font-size:15px}.map-popup-cat{color:var(--text3);text-transform:uppercase;margin-bottom:4px;font-family:DM Mono,monospace;font-size:14px}.map-popup-q{margin-bottom:4px;font-weight:600;line-height:1.3}.map-popup-prices{gap:16px;font-family:DM Mono,monospace;font-size:15px;display:flex}.map-label-text{color:var(--text2);text-shadow:0 1px 2px #000;font-family:DM Mono,monospace;font-size:14px}@media (width<=1024px){.dashboard-grid{grid-template-rows:auto auto auto;grid-template-columns:1fr}.signals-panel{grid-area:auto;max-height:400px}.map-panel{grid-area:auto;min-height:300px}.detail-panel{grid-area:auto}}@media (width<=640px){.layout{grid-template-columns:0 1fr}.sidebar,.topbar-stats{display:none}.outcomes-row{flex-direction:column}}.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;top:0;left:0}.leaflet-container{overflow:hidden}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-tile::selection{background:0 0}.leaflet-safari .leaflet-tile{image-rendering:-webkit-optimize-contrast}.leaflet-safari .leaflet-tile-container{-webkit-transform-origin:0 0;width:1600px;height:1600px}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container .leaflet-overlay-pane svg{max-width:none!important;max-height:none!important}.leaflet-container .leaflet-marker-pane img,.leaflet-container .leaflet-shadow-pane img,.leaflet-container .leaflet-tile-pane img,.leaflet-container img.leaflet-image-layer,.leaflet-container .leaflet-tile{width:auto;padding:0;max-width:none!important;max-height:none!important}.leaflet-container img.leaflet-tile{mix-blend-mode:plus-lighter}.leaflet-container.leaflet-touch-zoom{-ms-touch-action:pan-x pan-y;touch-action:pan-x pan-y}.leaflet-container.leaflet-touch-drag{-ms-touch-action:pinch-zoom;touch-action:none;touch-action:pinch-zoom}.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{-ms-touch-action:none;touch-action:none}.leaflet-container{-webkit-tap-highlight-color:transparent}.leaflet-container a{-webkit-tap-highlight-color:#33b5e566}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{box-sizing:border-box;z-index:800;width:0;height:0}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg{z-index:200}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{z-index:800;pointer-events:visiblePainted;pointer-events:auto;position:relative}.leaflet-top,.leaflet-bottom{z-index:1000;pointer-events:none;position:absolute}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-popup{opacity:0;transition:opacity .2s linear}.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-animated{transform-origin:0 0}svg.leaflet-zoom-animated{will-change:transform}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,.25,1);-moz-transition:-moz-transform .25s cubic-bezier(0,0,.25,1);transition:transform .25s cubic-bezier(0,0,.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile{transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-interactive{cursor:pointer}.leaflet-grab{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.leaflet-crosshair,.leaflet-crosshair .leaflet-interactive{cursor:crosshair}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-grab,.leaflet-dragging .leaflet-grab .leaflet-interactive,.leaflet-dragging .leaflet-marker-draggable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-image-layer,.leaflet-pane>svg path,.leaflet-tile-container{pointer-events:none}.leaflet-marker-icon.leaflet-interactive,.leaflet-image-layer.leaflet-interactive,.leaflet-pane>svg path.leaflet-interactive,svg.leaflet-image-layer.leaflet-interactive path{pointer-events:visiblePainted;pointer-events:auto}.leaflet-container{outline-offset:1px;background:#ddd}.leaflet-container a{color:#0078a8}.leaflet-zoom-box{background:#ffffff80;border:2px dotted #38f}.leaflet-container{font-family:Helvetica Neue,Arial,Helvetica,sans-serif;font-size:.75rem;line-height:1.5}.leaflet-bar{border-radius:4px;box-shadow:0 1px 5px #000000a6}.leaflet-bar a{text-align:center;color:#000;background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;text-decoration:none;display:block}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover,.leaflet-bar a:focus{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom:none;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.leaflet-bar a.leaflet-disabled{cursor:default;color:#bbb;background-color:#f4f4f4}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-touch .leaflet-bar a:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.leaflet-touch .leaflet-bar a:last-child{border-bottom-right-radius:2px;border-bottom-left-radius:2px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{text-indent:1px;font:700 18px Lucida Console,Monaco,monospace}.leaflet-touch .leaflet-control-zoom-in,.leaflet-touch .leaflet-control-zoom-out{font-size:22px}.leaflet-control-layers{background:#fff;border-radius:5px;box-shadow:0 1px 5px #0006}.leaflet-control-layers-toggle{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{color:#333;background:#fff;padding:6px 10px 6px 6px}.leaflet-control-layers-scrollbar{padding-right:5px;overflow:hidden scroll}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{font-size:1.08333em;display:block}.leaflet-control-layers-separator{border-top:1px solid #ddd;height:0;margin:5px -10px 5px -6px}.leaflet-default-icon-path{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=)}.leaflet-container .leaflet-control-attribution{background:#fffc;margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{color:#333;padding:0 5px;line-height:1.4}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover,.leaflet-control-attribution a:focus{text-decoration:underline}.leaflet-attribution-flag{width:1em;height:.6669em;vertical-align:baseline!important;display:inline!important}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{white-space:nowrap;box-sizing:border-box;text-shadow:1px 1px #fff;background:#fffc;border:2px solid #777;border-top:none;padding:2px 5px 1px;line-height:1.1}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{background-clip:padding-box;border:2px solid #0003}.leaflet-popup{text-align:center;margin-bottom:20px;position:absolute}.leaflet-popup-content-wrapper{text-align:left;border-radius:12px;padding:1px}.leaflet-popup-content{min-height:1px;margin:13px 24px 13px 20px;font-size:1.08333em;line-height:1.3}.leaflet-popup-content p{margin:1.3em 0}.leaflet-popup-tip-container{pointer-events:none;width:40px;height:20px;margin-top:-1px;margin-left:-20px;position:absolute;left:50%;overflow:hidden}.leaflet-popup-tip{pointer-events:auto;width:17px;height:17px;margin:-10px auto 0;padding:1px;transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{color:#333;background:#fff;box-shadow:0 3px 14px #0006}.leaflet-container a.leaflet-popup-close-button{text-align:center;color:#757575;background:0 0;border:none;width:24px;height:24px;font:16px/24px Tahoma,Verdana,sans-serif;text-decoration:none;position:absolute;top:0;right:0}.leaflet-container a.leaflet-popup-close-button:hover,.leaflet-container a.leaflet-popup-close-button:focus{color:#585858}.leaflet-popup-scrolled{overflow:auto}.leaflet-oldie .leaflet-popup-content-wrapper{-ms-zoom:1}.leaflet-oldie .leaflet-popup-tip{-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";width:24px;filter:progid:DXImageTransform.Microsoft.Matrix(M11=.707107, M12=.707107, M21=-.707107, M22=.707107);margin:0 auto}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666}.leaflet-tooltip{color:#222;white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none;background-color:#fff;border:1px solid #fff;border-radius:3px;padding:6px;position:absolute;box-shadow:0 1px 3px #0006}.leaflet-tooltip.leaflet-interactive{cursor:pointer;pointer-events:auto}.leaflet-tooltip-top:before,.leaflet-tooltip-bottom:before,.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{pointer-events:none;content:"";background:0 0;border:6px solid #0000;position:absolute}.leaflet-tooltip-bottom{margin-top:6px}.leaflet-tooltip-top{margin-top:-6px}.leaflet-tooltip-bottom:before,.leaflet-tooltip-top:before{margin-left:-6px;left:50%}.leaflet-tooltip-top:before{border-top-color:#fff;margin-bottom:-12px;bottom:0}.leaflet-tooltip-bottom:before{border-bottom-color:#fff;margin-top:-12px;margin-left:-6px;top:0}.leaflet-tooltip-left{margin-left:-6px}.leaflet-tooltip-right{margin-left:6px}.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{margin-top:-6px;top:50%}.leaflet-tooltip-left:before{border-left-color:#fff;margin-right:-12px;right:0}.leaflet-tooltip-right:before{border-right-color:#fff;margin-left:-12px;left:0}@media print{.leaflet-control{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

frontend/dist/index.html

@@ -5,13 +5,222 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>PolySignal — Dashboard de Inteligencia de Mercados</title>
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-  <script type="module" crossorigin src="/assets/index-CHfdQIIe.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-CIGW-MKW.css">
+  <script type="module" crossorigin src="/assets/index-A_KP_t7E.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-xtYPhhTl.css">
 </head>
 <body>
-  <div id="app">
-    <h1>PolySignal Dashboard</h1>
-    <p>Carga el entorno de desarrollo con <code>npm run dev</code> en la carpeta <code>frontend</code>.</p>
+  <div id="app" class="layout">
+
+    <!-- Sidebar -->
+    <aside class="sidebar" id="sidebar">
+      <div class="sidebar-toggle" id="sidebar-toggle" title="Colapsar sidebar">◀</div>
+      <nav class="sidebar-nav">
+        <div class="nav-item active" data-view="dashboard">
+          <span class="nav-icon">◈</span>
+          <span class="nav-label">Panel</span>
+        </div>
+        <div class="nav-item" data-view="positions">
+          <span class="nav-icon">◫</span>
+          <span class="nav-label">Posiciones</span>
+        </div>
+        <div class="nav-item" data-view="watchlist">
+          <span class="nav-icon">☆</span>
+          <span class="nav-label">Seguimiento</span>
+        </div>
+        <div class="nav-item" data-view="alerts">
+          <span class="nav-icon">⚡</span>
+          <span class="nav-label">Alertas</span>
+        </div>
+      </nav>
+      <div class="sidebar-footer">
+        v0.1.0 · HF Spaces
+      </div>
+    </aside>
+
+    <!-- Topbar -->
+    <header class="topbar" id="topbar">
+      <div class="topbar-logo">
+        <div class="logo-dot"></div>
+        <span class="logo-text">PolySignal</span>
+      </div>
+      <div class="live-badge">
+        <div class="live-dot"></div>
+        EN VIVO
+      </div>
+      <div class="topbar-stats">
+        <div class="stat">
+          <span class="stat-label">Mercados</span>
+          <span class="stat-val" id="stat-markets">2.847</span>
+        </div>
+        <div class="stat">
+          <span class="stat-label">Volumen 24h</span>
+          <span class="stat-val" id="stat-volume">€4,2M</span>
+          <span class="stat-delta up" id="stat-volume-delta">+12,4%</span>
+        </div>
+        <div class="stat">
+          <span class="stat-label">Señales IA</span>
+          <span class="stat-val" id="stat-signals">183</span>
+          <span class="stat-delta up" id="stat-signals-delta">alcista</span>
+        </div>
+        <div class="stat">
+          <span class="stat-label">Alertas enviadas</span>
+          <span class="stat-val" id="stat-alerts">47</span>
+          <span class="stat-delta neutral">hoy</span>
+        </div>
+        <div class="legend end">
+          <div class="legend-item"><div class="legend-dot green"></div>alcista</div>
+          <div class="legend-item"><div class="legend-dot red"></div>bajista</div>
+          <div class="legend-item"><div class="legend-dot gray"></div>neutral</div>
+        </div>
+      </div>
+      <div class="topbar-actions">
+        <button class="btn-ghost" id="btn-telegram">Alertas Telegram</button>
+        <button class="icon-btn" id="btn-notif" title="Notificaciones">◉</button>
+      </div>
+    </header>
+
+    <!-- Main content area -->
+    <main class="main" id="main">
+
+      <!-- DASHBOARD VIEW -->
+      <section class="view active" id="view-dashboard">
+        <div class="dashboard-grid">
+
+          <!-- Map Panel -->
+          <div class="panel map-panel" id="panel-map">
+            <div class="panel-header" data-panel="map">
+              <div class="panel-title">
+                <span>◈</span>
+                Mapa global de predicciones
+                <span class="panel-subtitle">· tamaño = volumen · color = señal IA</span>
+              </div>
+              <span class="panel-toggle">▼</span>
+            </div>
+            <div class="panel-body">
+              <div id="map-container"></div>
+            </div>
+          </div>
+
+          <!-- Signals Panel -->
+          <div class="panel signals-panel" id="panel-signals">
+            <div class="panel-header" data-panel="signals">
+              <div class="panel-title">
+                <span>◈</span>
+                Señales IA — mercados top
+              </div>
+              <span class="panel-toggle">▼</span>
+            </div>
+            <div class="panel-body">
+              <div class="signals-list" id="signals-list"></div>
+              <div class="positions-separator">
+                <div class="panel-title mb-sm">Mis posiciones</div>
+                <div id="mini-positions"></div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Detail Panel -->
+          <div class="panel detail-panel" id="panel-detail">
+            <div class="panel-header" data-panel="detail">
+              <div class="panel-title">
+                <span>◈</span>
+                Detalle del mercado
+              </div>
+              <span class="panel-toggle">▼</span>
+            </div>
+            <div class="panel-body" id="detail-body">
+              <!-- Dynamic content -->
+            </div>
+          </div>
+
+        </div>
+      </section>
+
+      <!-- POSITIONS VIEW -->
+      <section class="view" id="view-positions">
+        <div class="panel full-height">
+          <div class="panel-header">
+            <div class="panel-title"><span>◫</span> Simulador — Posiciones abiertas</div>
+          </div>
+          <div class="panel-body">
+            <div class="table-wrap">
+              <table id="positions-table">
+                <thead>
+                  <tr>
+                    <th>Mercado</th>
+                    <th>Resultado</th>
+                    <th>Cantidad</th>
+                    <th>Entrada</th>
+                    <th>Actual</th>
+                    <th>G&amp;P</th>
+                    <th>Kelly</th>
+                    <th>Abierta</th>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody></tbody>
+              </table>
+            </div>
+            <div class="empty-state hidden" id="positions-empty">No hay posiciones abiertas. Ve al Panel para simular una operación.</div>
+          </div>
+        </div>
+      </section>
+
+      <!-- WATCHLIST VIEW -->
+      <section class="view" id="view-watchlist">
+        <div class="panel full-height">
+          <div class="panel-header">
+            <div class="panel-title"><span>☆</span> Lista de seguimiento</div>
+          </div>
+          <div class="panel-body">
+            <div class="table-wrap">
+              <table id="watchlist-table">
+                <thead>
+                  <tr>
+                    <th>Mercado</th>
+                    <th>Categoría</th>
+                    <th>Sí</th>
+                    <th>No</th>
+                    <th>Señal</th>
+                    <th>Volumen</th>
+                    <th>Umbral de alerta</th>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody></tbody>
+              </table>
+            </div>
+            <div class="empty-state hidden" id="watchlist-empty">Tu lista de seguimiento está vacía. Añade mercados desde el Panel.</div>
+          </div>
+        </div>
+      </section>
+
+      <!-- ALERTS VIEW -->
+      <section class="view" id="view-alerts">
+        <div class="panel full-height">
+          <div class="panel-header">
+            <div class="panel-title"><span>⚡</span> Historial de alertas</div>
+          </div>
+          <div class="panel-body">
+            <div class="table-wrap">
+              <table id="alerts-table">
+                <thead>
+                  <tr>
+                    <th>Hora</th>
+                    <th>Mercado</th>
+                    <th>Tipo</th>
+                    <th>Mensaje</th>
+                  </tr>
+                </thead>
+                <tbody></tbody>
+              </table>
+            </div>
+            <div class="empty-state hidden" id="alerts-empty">Aún no se han enviado alertas.</div>
+          </div>
+        </div>
+      </section>
+
+    </main>
   </div>
 
 </body>

frontend/index.html

@@ -7,9 +7,218 @@
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 </head>
 <body>
-  <div id="app">
-    <h1>PolySignal Dashboard</h1>
-    <p>Carga el entorno de desarrollo con <code>npm run dev</code> en la carpeta <code>frontend</code>.</p>
+  <div id="app" class="layout">
+
+    <!-- Sidebar -->
+    <aside class="sidebar" id="sidebar">
+      <div class="sidebar-toggle" id="sidebar-toggle" title="Colapsar sidebar">◀</div>
+      <nav class="sidebar-nav">
+        <div class="nav-item active" data-view="dashboard">
+          <span class="nav-icon">◈</span>
+          <span class="nav-label">Panel</span>
+        </div>
+        <div class="nav-item" data-view="positions">
+          <span class="nav-icon">◫</span>
+          <span class="nav-label">Posiciones</span>
+        </div>
+        <div class="nav-item" data-view="watchlist">
+          <span class="nav-icon">☆</span>
+          <span class="nav-label">Seguimiento</span>
+        </div>
+        <div class="nav-item" data-view="alerts">
+          <span class="nav-icon">⚡</span>
+          <span class="nav-label">Alertas</span>
+        </div>
+      </nav>
+      <div class="sidebar-footer">
+        v0.1.0 · HF Spaces
+      </div>
+    </aside>
+
+    <!-- Topbar -->
+    <header class="topbar" id="topbar">
+      <div class="topbar-logo">
+        <div class="logo-dot"></div>
+        <span class="logo-text">PolySignal</span>
+      </div>
+      <div class="live-badge">
+        <div class="live-dot"></div>
+        EN VIVO
+      </div>
+      <div class="topbar-stats">
+        <div class="stat">
+          <span class="stat-label">Mercados</span>
+          <span class="stat-val" id="stat-markets">2.847</span>
+        </div>
+        <div class="stat">
+          <span class="stat-label">Volumen 24h</span>
+          <span class="stat-val" id="stat-volume">€4,2M</span>
+          <span class="stat-delta up" id="stat-volume-delta">+12,4%</span>
+        </div>
+        <div class="stat">
+          <span class="stat-label">Señales IA</span>
+          <span class="stat-val" id="stat-signals">183</span>
+          <span class="stat-delta up" id="stat-signals-delta">alcista</span>
+        </div>
+        <div class="stat">
+          <span class="stat-label">Alertas enviadas</span>
+          <span class="stat-val" id="stat-alerts">47</span>
+          <span class="stat-delta neutral">hoy</span>
+        </div>
+        <div class="legend end">
+          <div class="legend-item"><div class="legend-dot green"></div>alcista</div>
+          <div class="legend-item"><div class="legend-dot red"></div>bajista</div>
+          <div class="legend-item"><div class="legend-dot gray"></div>neutral</div>
+        </div>
+      </div>
+      <div class="topbar-actions">
+        <button class="btn-ghost" id="btn-telegram">Alertas Telegram</button>
+        <button class="icon-btn" id="btn-notif" title="Notificaciones">◉</button>
+      </div>
+    </header>
+
+    <!-- Main content area -->
+    <main class="main" id="main">
+
+      <!-- DASHBOARD VIEW -->
+      <section class="view active" id="view-dashboard">
+        <div class="dashboard-grid">
+
+          <!-- Map Panel -->
+          <div class="panel map-panel" id="panel-map">
+            <div class="panel-header" data-panel="map">
+              <div class="panel-title">
+                <span>◈</span>
+                Mapa global de predicciones
+                <span class="panel-subtitle">· tamaño = volumen · color = señal IA</span>
+              </div>
+              <span class="panel-toggle">▼</span>
+            </div>
+            <div class="panel-body">
+              <div id="map-container"></div>
+            </div>
+          </div>
+
+          <!-- Signals Panel -->
+          <div class="panel signals-panel" id="panel-signals">
+            <div class="panel-header" data-panel="signals">
+              <div class="panel-title">
+                <span>◈</span>
+                Señales IA — mercados top
+              </div>
+              <span class="panel-toggle">▼</span>
+            </div>
+            <div class="panel-body">
+              <div class="signals-list" id="signals-list"></div>
+              <div class="positions-separator">
+                <div class="panel-title mb-sm">Mis posiciones</div>
+                <div id="mini-positions"></div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Detail Panel -->
+          <div class="panel detail-panel" id="panel-detail">
+            <div class="panel-header" data-panel="detail">
+              <div class="panel-title">
+                <span>◈</span>
+                Detalle del mercado
+              </div>
+              <span class="panel-toggle">▼</span>
+            </div>
+            <div class="panel-body" id="detail-body">
+              <!-- Dynamic content -->
+            </div>
+          </div>
+
+        </div>
+      </section>
+
+      <!-- POSITIONS VIEW -->
+      <section class="view" id="view-positions">
+        <div class="panel full-height">
+          <div class="panel-header">
+            <div class="panel-title"><span>◫</span> Simulador — Posiciones abiertas</div>
+          </div>
+          <div class="panel-body">
+            <div class="table-wrap">
+              <table id="positions-table">
+                <thead>
+                  <tr>
+                    <th>Mercado</th>
+                    <th>Resultado</th>
+                    <th>Cantidad</th>
+                    <th>Entrada</th>
+                    <th>Actual</th>
+                    <th>G&amp;P</th>
+                    <th>Kelly</th>
+                    <th>Abierta</th>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody></tbody>
+              </table>
+            </div>
+            <div class="empty-state hidden" id="positions-empty">No hay posiciones abiertas. Ve al Panel para simular una operación.</div>
+          </div>
+        </div>
+      </section>
+
+      <!-- WATCHLIST VIEW -->
+      <section class="view" id="view-watchlist">
+        <div class="panel full-height">
+          <div class="panel-header">
+            <div class="panel-title"><span>☆</span> Lista de seguimiento</div>
+          </div>
+          <div class="panel-body">
+            <div class="table-wrap">
+              <table id="watchlist-table">
+                <thead>
+                  <tr>
+                    <th>Mercado</th>
+                    <th>Categoría</th>
+                    <th>Sí</th>
+                    <th>No</th>
+                    <th>Señal</th>
+                    <th>Volumen</th>
+                    <th>Umbral de alerta</th>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody></tbody>
+              </table>
+            </div>
+            <div class="empty-state hidden" id="watchlist-empty">Tu lista de seguimiento está vacía. Añade mercados desde el Panel.</div>
+          </div>
+        </div>
+      </section>
+
+      <!-- ALERTS VIEW -->
+      <section class="view" id="view-alerts">
+        <div class="panel full-height">
+          <div class="panel-header">
+            <div class="panel-title"><span>⚡</span> Historial de alertas</div>
+          </div>
+          <div class="panel-body">
+            <div class="table-wrap">
+              <table id="alerts-table">
+                <thead>
+                  <tr>
+                    <th>Hora</th>
+                    <th>Mercado</th>
+                    <th>Tipo</th>
+                    <th>Mensaje</th>
+                  </tr>
+                </thead>
+                <tbody></tbody>
+              </table>
+            </div>
+            <div class="empty-state hidden" id="alerts-empty">Aún no se han enviado alertas.</div>
+          </div>
+        </div>
+      </section>
+
+    </main>
   </div>
 
   <script type="module" src="/src/main.js"></script>

frontend/package.json

@@ -9,11 +9,14 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^6.0.0"
+    "vite": "^8.0.13"
+  },
+  "engines": {
+    "node": ">=26.0.0"
   },
   "dependencies": {
-    "chart.js": "^4.4.8",
+    "chart.js": "^4.5.1",
     "leaflet": "^1.9.4",
-    "socket.io-client": "^4.8.1"
+    "socket.io-client": "^4.8.3"
   }
 }

frontend/src/api.js

@@ -1,7 +1,7 @@
 /**
  * Cliente HTTP para consumir la API REST del backend.
  *
- * Funciones fetch encapsuladas para cada endpoint:
+ * Endpoints:
  *   - getMarkets(), getMarket(id), getSignal(id)
  *   - createPosition(data), getPositions(), closePosition(id)
  *   - addToWatchlist(marketId), removeFromWatchlist(marketId), getWatchlist()
@@ -9,3 +9,75 @@
  *
  * Base URL: /api/v1 (mismo dominio, sin CORS en producción HF Spaces).
  */
+
+const BASE = '/api/v1'
+
+async function fetchJson(url, opts = {}) {
+  const res = await fetch(url, {
+    headers: { 'Content-Type': 'application/json', ...opts.headers },
+    ...opts,
+  })
+  if (!res.ok) {
+    const text = await res.text().catch(() => '')
+    throw new Error(`HTTP ${res.status}: ${text}`)
+  }
+  if (res.status === 204) return null
+  return res.json()
+}
+
+/* ─── Markets ─── */
+export async function getMarkets(params = {}) {
+  const qs = new URLSearchParams(params).toString()
+  return fetchJson(`${BASE}/markets${qs ? '?' + qs : ''}`)
+}
+
+export async function getMarket(id) {
+  return fetchJson(`${BASE}/markets/${id}`)
+}
+
+/* ─── Signals ─── */
+export async function getSignal(marketId) {
+  return fetchJson(`${BASE}/markets/${marketId}/signal`)
+}
+
+/* ─── Positions ─── */
+export async function getPositions() {
+  return fetchJson(`${BASE}/positions`)
+}
+
+export async function createPosition(data) {
+  return fetchJson(`${BASE}/positions`, {
+    method: 'POST',
+    body: JSON.stringify(data),
+  })
+}
+
+export async function closePosition(id) {
+  return fetchJson(`${BASE}/positions/${id}`, { method: 'DELETE' })
+}
+
+/* ─── Watchlist ─── */
+export async function getWatchlist() {
+  return fetchJson(`${BASE}/watchlist`)
+}
+
+export async function addToWatchlist(marketId, alertThreshold) {
+  return fetchJson(`${BASE}/watchlist`, {
+    method: 'POST',
+    body: JSON.stringify({ marketId, alertThreshold }),
+  })
+}
+
+export async function removeFromWatchlist(marketId) {
+  return fetchJson(`${BASE}/watchlist/${marketId}`, { method: 'DELETE' })
+}
+
+/* ─── Alerts ─── */
+export async function getAlerts() {
+  return fetchJson(`${BASE}/alerts`)
+}
+
+/* ─── Stats ─── */
+export async function getStats() {
+  return fetchJson(`${BASE}/stats`)
+}

frontend/src/app.js

@@ -1,13 +1,11 @@
 /**
- * Punto de entrada del frontend (Vanilla JS).
+ * Lógica principal de la SPA PolySignal.
  *
  * Responsabilidades:
- *   - Inicializar conexion Socket.io y escuchar eventos:
- *       'market_update', 'ai_signal', 'price_alert'
- *   - Orchestrar la carga inicial de datos (mercados, posiciones, watchlist)
- *   - Conectar los modulos: map.js, charts.js, simulator.js, api.js
- *
- * Se ejecuta al cargar index.html.
+ *   - Routing de vistas (dashboard, positions, watchlist, alerts)
+ *   - Sidebar y paneles colapsables
+ *   - Carga inicial de datos y actualizaciones en tiempo real
+ *   - Integración con api.js, map.js, charts.js, simulator.js
  */
 
 import { io } from 'socket.io-client'
@@ -16,22 +14,626 @@ import * as charts from './charts.js'
 import * as map from './map.js'
 import * as simulator from './simulator.js'
 
-const socket = io()
+/* ─── Estado global ─── */
+let state = {
+  view: 'dashboard',
+  activeMarketId: null,
+  markets: [],
+  signals: [],
+  positions: [],
+  watchlist: [],
+  alerts: [],
+  collapsedPanels: new Set(),
+  sidebarCollapsed: false,
+}
+
+/* ─── Datos mock para demo (fallback si backend no responde) ─── */
+const MOCK_MARKETS = [
+  {
+    id: 'usa-001',
+    question: '¿Trump firmará la ley fiscal antes de junio de 2026?',
+    category: 'política',
+    countryCode: 'US',
+    yesPrice: 0.73,
+    noPrice: 0.27,
+    volumeEur: 1240000,
+    liquidityEur: 340000,
+    status: 'active',
+    closesAt: '2026-06-01T00:00:00Z',
+  },
+  {
+    id: 'eur-001',
+    question: '¿El BCE recortará tipos en junio de 2026?',
+    category: 'economía',
+    countryCode: 'DE',
+    yesPrice: 0.34,
+    noPrice: 0.66,
+    volumeEur: 890000,
+    liquidityEur: 210000,
+    status: 'active',
+    closesAt: '2026-06-12T00:00:00Z',
+  },
+  {
+    id: 'chn-001',
+    question: '¿Se alcanzará un acuerdo arancelario EE.UU.-China antes del T3 2026?',
+    category: 'comercio',
+    countryCode: 'CN',
+    yesPrice: 0.51,
+    noPrice: 0.49,
+    volumeEur: 2100000,
+    liquidityEur: 580000,
+    status: 'active',
+    closesAt: '2026-07-01T00:00:00Z',
+  },
+  {
+    id: 'bra-001',
+    question: '¿Bitcoin superará los $120.000 antes de julio de 2026?',
+    category: 'cripto',
+    countryCode: 'BR',
+    yesPrice: 0.61,
+    noPrice: 0.39,
+    volumeEur: 3400000,
+    liquidityEur: 920000,
+    status: 'active',
+    closesAt: '2026-07-01T00:00:00Z',
+  },
+  {
+    id: 'uk-001',
+    question: '¿La inflación del Reino Unido bajará del 2% en 2026?',
+    category: 'economía',
+    countryCode: 'GB',
+    yesPrice: 0.45,
+    noPrice: 0.55,
+    volumeEur: 620000,
+    liquidityEur: 180000,
+    status: 'active',
+    closesAt: '2026-09-01T00:00:00Z',
+  },
+  {
+    id: 'ind-001',
+    question: '¿El crecimiento del PIB de India superará el 7% en el AF2026?',
+    category: 'economía',
+    countryCode: 'IN',
+    yesPrice: 0.68,
+    noPrice: 0.32,
+    volumeEur: 450000,
+    liquidityEur: 120000,
+    status: 'active',
+    closesAt: '2026-03-31T00:00:00Z',
+  },
+]
+
+const MOCK_SIGNALS = {
+  'usa-001': {
+    signal: 'bullish',
+    confidence: 0.87,
+    summary: 'El liderazgo republicano confirmó 3 de 4 votos de comité asegurados. El sentimiento de noticias de 8 fuentes es positivo (+0,72). La línea temporal del Congreso sugiere que la ventana de firma se abre del 28 al 31 de mayo.',
+    keyRisk: 'El proceso de enmiendas en el Senado podría retrasar más allá del 1 de junio.',
+  },
+  'eur-001': {
+    signal: 'bearish',
+    confidence: 0.74,
+    summary: 'La inflación de la zona euro sorprendió al alza al 2,4% en abril. Las recientes declaraciones de los miembros del consejo de gobierno del BCE señalan que es más probable una pausa.',
+    keyRisk: 'La valoración del mercado de bonos implica solo un 22% de probabilidad de recorte en junio.',
+  },
+  'chn-001': {
+    signal: 'neutral',
+    confidence: 0.52,
+    summary: 'Las negociaciones continúan pero no se ha acordado un marco formal. Los flujos comerciales muestran patrones tempranos de evasión arancelaria, sugiriendo que ambas partes ganan tiempo.',
+    keyRisk: 'Demasiadas variables geopolíticas. Se monitorea la declaración del USTR como señal clave.',
+  },
+  'bra-001': {
+    signal: 'bullish',
+    confidence: 0.79,
+    summary: 'BTC actualmente en $103.400. Las métricas on-chain muestran acumulación de grandes carteras. Entradas en ETF +$820M esta semana. El mercado de opciones implica 68% de probabilidad de $120K a finales de junio.',
+    keyRisk: 'Las condiciones de liquidez macro podrían cambiar si la Fed mantiene una postura hawkish.',
+  },
+  'uk-001': {
+    signal: 'neutral',
+    confidence: 0.58,
+    summary: 'Las previsiones del BoE sugieren una caída gradual pero los shocks externos de precios de energía siguen siendo una incógnita. La inflación de servicios se mantiene en el 5,2%.',
+    keyRisk: 'Las interrupciones geopolíticas en la cadena de suministro podrían reavivar la inflación de bienes.',
+  },
+  'ind-001': {
+    signal: 'bullish',
+    confidence: 0.71,
+    summary: 'Dato del T4 AF25 en 7,1% con expansión del PMI manufacturero. El impulso del gasto público en infraestructura probablemente sostenga el momentum en el S1 AF26.',
+    keyRisk: 'El impacto de El Niño en la producción agrícola podría reducir 30-40 pb del dato principal.',
+  },
+}
+
+const MOCK_POSITIONS = [
+  {
+    id: 1,
+    marketId: 'usa-001',
+    outcome: 'SÍ',
+    amountEur: 100,
+    entryPrice: 0.68,
+    currentPrice: 0.73,
+    pnl: 14.20,
+    kellyFraction: 0.25,
+    openedAt: '2026-05-10T14:30:00Z',
+  },
+  {
+    id: 2,
+    marketId: 'eur-001',
+    outcome: 'NO',
+    amountEur: 80,
+    entryPrice: 0.62,
+    currentPrice: 0.66,
+    pnl: -3.80,
+    kellyFraction: 0.18,
+    openedAt: '2026-05-11T09:15:00Z',
+  },
+]
+
+const MOCK_ALERTS = [
+  {
+    id: 1,
+    marketId: 'usa-001',
+    type: 'cambio_señal',
+    message: 'La señal cambió a ALCISTA (87%) en ley fiscal de Trump',
+    sentAt: '2026-05-14T08:23:00Z',
+  },
+  {
+    id: 2,
+    marketId: 'bra-001',
+    type: 'umbral_precio',
+    message: 'El mercado BTC $120K SÍ cruzó el umbral de 60¢',
+    sentAt: '2026-05-14T07:45:00Z',
+  },
+]
+
+/* ─── Helpers ─── */
+function formatCurrency(n) {
+  if (n >= 1e6) return '€' + (n / 1e6).toFixed(1) + 'M'
+  if (n >= 1e3) return '€' + (n / 1e3).toFixed(1) + 'K'
+  return '€' + n.toFixed(0)
+}
+
+function formatPrice(p) {
+  return Math.round(p * 100) + '¢'
+}
+
+function formatDate(iso) {
+  const d = new Date(iso)
+  return d.toLocaleDateString('es-ES', { month: 'short', day: 'numeric', year: 'numeric' })
+}
+
+function signalColorClass(signal) {
+  if (signal === 'bullish') return 'green'
+  if (signal === 'bearish') return 'red'
+  return 'amber'
+}
+
+function getSignalBadgeClass(signal) {
+  if (signal === 'bullish') return 'sig-bull'
+  if (signal === 'bearish') return 'sig-bear'
+  return 'sig-neut'
+}
+
+function getSignalLabel(signal) {
+  if (signal === 'bullish') return 'ALC'
+  if (signal === 'bearish') return 'BAJ'
+  return 'NEUT'
+}
+
+function translateSignal(signal) {
+  if (signal === 'bullish') return 'alcista'
+  if (signal === 'bearish') return 'bajista'
+  return 'neutral'
+}
+
+/* ─── Routing de vistas ─── */
+function switchView(viewName) {
+  state.view = viewName
+  document.querySelectorAll('.view').forEach((el) => el.classList.toggle('active', el.id === `view-${viewName}`))
+  document.querySelectorAll('.nav-item').forEach((el) => el.classList.toggle('active', el.dataset.view === viewName))
+  if (viewName === 'positions') renderPositions()
+  if (viewName === 'watchlist') renderWatchlist()
+  if (viewName === 'alerts') renderAlerts()
+}
+
+/* ─── Sidebar toggle ─── */
+function toggleSidebar() {
+  state.sidebarCollapsed = !state.sidebarCollapsed
+  document.getElementById('app').classList.toggle('collapsed', state.sidebarCollapsed)
+}
+
+/* ─── Panel toggle ─── */
+function togglePanel(panelId) {
+  const panel = document.getElementById(`panel-${panelId}`)
+  if (!panel) return
+  const isCollapsed = panel.classList.toggle('collapsed')
+  if (isCollapsed) state.collapsedPanels.add(panelId)
+  else state.collapsedPanels.delete(panelId)
+}
+
+/* ─── Render signals list ─── */
+function renderSignals() {
+  const container = document.getElementById('signals-list')
+  if (!container) return
+  container.innerHTML = state.markets
+    .map((m) => {
+      const sig = state.signals.find((s) => s.marketId === m.id) || MOCK_SIGNALS[m.id] || { signal: 'neutral', confidence: 0.5 }
+      const isActive = state.activeMarketId === m.id
+      const cls = signalColorClass(sig.signal)
+      const badgeClass = getSignalBadgeClass(sig.signal)
+      return `
+        <div class="market-card ${isActive ? 'active' : ''}" data-market="${m.id}">
+          <div class="market-cat">${m.category || 'General'} · ${m.countryCode || 'GL'}</div>
+          <div class="market-q">${m.question}</div>
+          <div class="market-footer">
+            <div class="prob-bar-wrap">
+              <div class="prob-bar-bg">
+                <div class="prob-bar-fill bg-${cls}" style="--prob-width:${Math.round(m.yesPrice * 100)}%"></div>
+              </div>
+            </div>
+            <span class="prob-val text-${cls}">${formatPrice(m.yesPrice)}</span>
+            <span class="signal-badge ${badgeClass}">${getSignalLabel(sig.signal)}</span>
+          </div>
+        </div>
+      `
+    })
+    .join('')
+
+  container.querySelectorAll('.market-card').forEach((card) => {
+    card.addEventListener('click', () => selectMarket(card.dataset.market))
+  })
+}
+
+/* ─── Render mini positions in sidebar ─── */
+function renderMiniPositions() {
+  const container = document.getElementById('mini-positions')
+  if (!container) return
+  if (state.positions.length === 0) {
+    container.innerHTML = '<div class="empty-state empty-state-sm">Aún sin posiciones</div>'
+    return
+  }
+  let netPnl = 0
+  const items = state.positions
+    .map((p) => {
+      const m = state.markets.find((x) => x.id === p.marketId) || { question: p.marketId }
+      netPnl += p.pnl
+      const cls = p.pnl >= 0 ? 'green' : 'red'
+      const sign = p.pnl >= 0 ? '+' : ''
+      return `
+        <div class="flex-between mb-6">
+          <span class="text-sm text-neutral font-mono">${m.question.substring(0, 32)}${m.question.length > 32 ? '…' : ''} ${p.outcome}</span>
+          <span class="text-base font-semibold text-${cls} font-mono">${sign}€${p.pnl.toFixed(2)}</span>
+        </div>
+      `
+    })
+    .join('')
+
+  const netCls = netPnl >= 0 ? 'green' : 'red'
+  const netSign = netPnl >= 0 ? '+' : ''
+  container.innerHTML = `
+    ${items}
+    <div class="divider"></div>
+    <div class="flex-between">
+      <span class="text-sm text-neutral font-mono">G&amp;P Neto</span>
+      <span class="text-lg font-bold text-${netCls} font-mono">${netSign}€${netPnl.toFixed(2)}</span>
+    </div>
+  `
+}
+
+/* ─── Render detail panel ─── */
+function renderDetail() {
+  const container = document.getElementById('detail-body')
+  if (!container) return
+  const m = state.markets.find((x) => x.id === state.activeMarketId)
+  if (!m) {
+    container.innerHTML = '<div class="empty-state">Selecciona un mercado para ver detalles</div>'
+    return
+  }
+
+  const sig = state.signals.find((s) => s.marketId === m.id) || MOCK_SIGNALS[m.id] || { signal: 'neutral', confidence: 0.5, summary: 'Aún no hay análisis de IA disponible.', keyRisk: '' }
+  const delta = ((m.yesPrice - 0.5) * 20).toFixed(1)
+  const deltaCls = m.yesPrice > 0.5 ? 'green' : 'red'
+  const deltaSign = m.yesPrice > 0.5 ? '+' : ''
+
+  container.innerHTML = `
+    <div class="detail-header">
+      <div>
+        <div class="detail-tag">${m.countryCode || 'GL'} · ${m.category || 'General'} · Polymarket</div>
+        <div class="detail-q">${m.question}</div>
+        <div class="detail-meta">Vol: ${formatCurrency(m.volumeEur || 0)} · Liq: ${formatCurrency(m.liquidityEur || 0)} · Cierra: ${formatDate(m.closesAt)}</div>
+      </div>
+      <div class="detail-metrics">
+        <div class="metric">
+          <div class="metric-label">Cambio 24h</div>
+          <div class="metric-value text-${deltaCls}">${deltaSign}${delta}%</div>
+        </div>
+        <div class="metric-sep"></div>
+        <div class="metric">
+          <div class="metric-label">Confianza</div>
+          <div class="metric-value text-blue">${Math.round(sig.confidence * 100)}%</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="outcomes-row">
+      <div class="outcome-card yes">
+        <div class="outcome-name">SÍ</div>
+        <div class="outcome-price">${formatPrice(m.yesPrice)}</div>
+        <div class="outcome-delta td-green">▲ ${(m.yesPrice * 0.05).toFixed(1)}¢</div>
+        <div class="sparkline" id="spark-yes"></div>
+      </div>
+      <div class="outcome-card no">
+        <div class="outcome-name">NO</div>
+        <div class="outcome-price">${formatPrice(m.noPrice)}</div>
+        <div class="outcome-delta td-red">▼ ${(m.noPrice * 0.05).toFixed(1)}¢</div>
+        <div class="sparkline" id="spark-no"></div>
+      </div>
+      <div class="chart-container">
+        <div class="chart-label">Historial de precios 7d</div>
+        <canvas id="detail-chart"></canvas>
+      </div>
+    </div>
+
+    <div class="ai-box">
+      <div class="ai-icon">◈</div>
+      <div class="flex-1">
+        <div class="flex-row gap-8 mb-4 flex-wrap">
+          <div class="ai-label">Análisis IA · HuggingFace Qwen3-8B</div>
+          <span class="signal-badge ${getSignalBadgeClass(sig.signal)}">${translateSignal(sig.signal).toUpperCase()} · ${Math.round(sig.confidence * 100)}%</span>
+          <span class="text-xs text-neutral font-mono ml-auto">actualizado hace 2m</span>
+        </div>
+        <div class="ai-text">${sig.summary}${sig.keyRisk ? ' <strong>Riesgo clave:</strong> ' + sig.keyRisk : ''}</div>
+      </div>
+    </div>
+
+    <div class="sim-row">
+      <span class="sim-label">Simular posición →</span>
+      <input class="sim-input" type="number" id="sim-amount" value="100" min="1" placeholder="€"/>
+      <button class="sim-btn-yes" id="sim-yes">COMPRAR SÍ ↗</button>
+      <button class="sim-btn-no" id="sim-no">COMPRAR NO</button>
+      <span class="sim-disclaimer">Simulado · sin trading real</span>
+    </div>
+  `
+
+  // Bind simulator buttons
+  document.getElementById('sim-yes')?.addEventListener('click', () => simulator.openPosition(m.id, 'SÍ', document.getElementById('sim-amount').value))
+  document.getElementById('sim-no')?.addEventListener('click', () => simulator.openPosition(m.id, 'NO', document.getElementById('sim-amount').value))
+
+  // Render chart
+  charts.renderDetailChart('detail-chart', m.yesPrice)
+  charts.renderSparkline('spark-yes', m.yesPrice, 'yes')
+  charts.renderSparkline('spark-no', m.noPrice, 'no')
+}
+
+/* ─── Select market ─── */
+function selectMarket(marketId) {
+  state.activeMarketId = marketId
+  renderSignals()
+  renderDetail()
+  map.highlightMarket(marketId)
+}
+
+/* ─── Render positions view ─── */
+function renderPositions() {
+  const tbody = document.querySelector('#positions-table tbody')
+  const empty = document.getElementById('positions-empty')
+  if (!tbody) return
+  if (state.positions.length === 0) {
+    tbody.innerHTML = ''
+    empty.classList.remove('hidden')
+    return
+  }
+  empty.classList.add('hidden')
+  tbody.innerHTML = state.positions
+    .map((p) => {
+      const m = state.markets.find((x) => x.id === p.marketId) || { question: p.marketId }
+      const pnlColor = p.pnl >= 0 ? 'td-green' : 'td-red'
+      const sign = p.pnl >= 0 ? '+' : ''
+      return `
+        <tr>
+          <td>${m.question.substring(0, 40)}${m.question.length > 40 ? '…' : ''}</td>
+          <td class="td-mono ${p.outcome === 'SÍ' ? 'td-green' : 'td-red'}">${p.outcome}</td>
+          <td class="td-mono">€${p.amountEur.toFixed(0)}</td>
+          <td class="td-mono">${formatPrice(p.entryPrice)}</td>
+          <td class="td-mono">${formatPrice(p.currentPrice)}</td>
+          <td class="td-mono ${pnlColor}">${sign}€${p.pnl.toFixed(2)}</td>
+          <td class="td-mono td-blue">${((p.kellyFraction || 0) * 100).toFixed(0)}%</td>
+          <td class="td-mono">${formatDate(p.openedAt)}</td>
+          <td><button class="btn-ghost" onclick="closePositionById(${p.id})">Cerrar</button></td>
+        </tr>
+      `
+    })
+    .join('')
+}
+
+window.closePositionById = async (id) => {
+  await simulator.closePosition(id)
+  await loadPositions()
+  renderPositions()
+  renderMiniPositions()
+}
+
+/* ─── Render watchlist view ─── */
+function renderWatchlist() {
+  const tbody = document.querySelector('#watchlist-table tbody')
+  const empty = document.getElementById('watchlist-empty')
+  if (!tbody) return
+  if (state.watchlist.length === 0) {
+    tbody.innerHTML = ''
+    empty.classList.remove('hidden')
+    return
+  }
+  empty.classList.add('hidden')
+  tbody.innerHTML = state.watchlist
+    .map((w) => {
+      const m = state.markets.find((x) => x.id === w.marketId) || { question: w.marketId, category: '-', yesPrice: 0, noPrice: 0, volumeEur: 0 }
+      const sig = state.signals.find((s) => s.marketId === w.marketId) || { signal: 'neutral' }
+      return `
+        <tr>
+          <td>${m.question.substring(0, 40)}${m.question.length > 40 ? '…' : ''}</td>
+          <td>${m.category || '-'}</td>
+          <td class="td-mono td-green">${formatPrice(m.yesPrice)}</td>
+          <td class="td-mono td-red">${formatPrice(m.noPrice)}</td>
+          <td><span class="signal-badge ${getSignalBadgeClass(sig.signal)}">${getSignalLabel(sig.signal)}</span></td>
+          <td class="td-mono">${formatCurrency(m.volumeEur || 0)}</td>
+          <td class="td-mono">${w.alertThreshold ? formatPrice(w.alertThreshold) : '-'}</td>
+          <td><button class="btn-ghost" onclick="removeFromWatchlistById('${w.marketId}')">Eliminar</button></td>
+        </tr>
+      `
+    })
+    .join('')
+}
+
+window.removeFromWatchlistById = async (marketId) => {
+  try { await api.removeFromWatchlist(marketId) } catch (e) { console.warn(e) }
+  state.watchlist = state.watchlist.filter((w) => w.marketId !== marketId)
+  renderWatchlist()
+}
+
+/* ─── Render alerts view ─── */
+function renderAlerts() {
+  const tbody = document.querySelector('#alerts-table tbody')
+  const empty = document.getElementById('alerts-empty')
+  if (!tbody) return
+  if (state.alerts.length === 0) {
+    tbody.innerHTML = ''
+    empty.classList.remove('hidden')
+    return
+  }
+  empty.classList.add('hidden')
+  tbody.innerHTML = state.alerts
+    .map((a) => {
+      const m = state.markets.find((x) => x.id === a.marketId) || { question: a.marketId }
+      return `
+        <tr>
+          <td class="td-mono">${new Date(a.sentAt).toLocaleString('es-ES')}</td>
+          <td>${m.question.substring(0, 35)}${m.question.length > 35 ? '…' : ''}</td>
+          <td><span class="signal-badge sig-neut">${a.type}</span></td>
+          <td>${a.message}</td>
+        </tr>
+      `
+    })
+    .join('')
+}
+
+/* ─── Carga de datos ─── */
+async function loadMarkets() {
+  try {
+    const data = await api.getMarkets({ limit: 50 })
+    state.markets = data.length ? data : MOCK_MARKETS
+  } catch (e) {
+    console.warn('API mercados no disponible, usando datos de prueba')
+    state.markets = MOCK_MARKETS
+  }
+}
+
+async function loadSignals() {
+  try {
+    const promises = state.markets.map((m) => api.getSignal(m.id).catch(() => null))
+    const results = await Promise.all(promises)
+    state.signals = results.filter(Boolean).map((r, i) => ({ ...r, marketId: state.markets[i].id }))
+  } catch (e) {
+    console.warn('API señales no disponible, usando datos de prueba')
+    state.signals = Object.entries(MOCK_SIGNALS).map(([marketId, s]) => ({ ...s, marketId }))
+  }
+}
+
+async function loadPositions() {
+  try {
+    state.positions = await api.getPositions()
+  } catch (e) {
+    state.positions = MOCK_POSITIONS
+  }
+}
+
+async function loadWatchlist() {
+  try {
+    state.watchlist = await api.getWatchlist()
+  } catch (e) {
+    state.watchlist = []
+  }
+}
+
+async function loadAlerts() {
+  try {
+    state.alerts = await api.getAlerts()
+  } catch (e) {
+    state.alerts = MOCK_ALERTS
+  }
+}
+
+/* ─── Inicialización ─── */
+export async function init() {
+  // Sidebar toggle
+  document.getElementById('sidebar-toggle')?.addEventListener('click', toggleSidebar)
+
+  // Nav routing
+  document.querySelectorAll('.nav-item').forEach((el) => {
+    el.addEventListener('click', () => switchView(el.dataset.view))
+  })
+
+  // Panel toggles
+  document.querySelectorAll('.panel-header[data-panel]').forEach((el) => {
+    el.addEventListener('click', (e) => {
+      // Evitar colapsar al clicar elementos interactivos
+      if (e.target.closest('button, input, a')) return
+      togglePanel(el.dataset.panel)
+    })
+  })
+
+  // Load initial data
+  await loadMarkets()
+  await loadSignals()
+  await loadPositions()
+  await loadWatchlist()
+  await loadAlerts()
+
+  // Init modules
+  map.init('map-container', state.markets, state.signals, selectMarket)
+  simulator.init(state)
+
+  // Initial render
+  state.activeMarketId = state.markets[0]?.id || null
+  renderSignals()
+  renderDetail()
+  renderMiniPositions()
 
-socket.on('connect', () => {
-  console.log('Socket.io conectado')
-})
+  // Socket.io
+  const socket = io()
+  socket.on('connect', () => console.log('Socket.io conectado'))
 
-socket.on('market_update', (data) => {
-  console.log('market_update', data)
-})
+  socket.on('market_update', (data) => {
+    const m = state.markets.find((x) => x.id === data.marketId)
+    if (m) {
+      Object.assign(m, data)
+      if (state.activeMarketId === data.marketId) renderDetail()
+      renderSignals()
+      map.updateBubble(data.marketId, data.yesPrice)
+    }
+  })
 
-socket.on('ai_signal', (data) => {
-  console.log('ai_signal', data)
-})
+  socket.on('ai_signal', (data) => {
+    const idx = state.signals.findIndex((s) => s.marketId === data.marketId)
+    if (idx >= 0) state.signals[idx] = data
+    else state.signals.push(data)
+    renderSignals()
+    if (state.activeMarketId === data.marketId) renderDetail()
+  })
 
-socket.on('price_alert', (data) => {
-  console.log('price_alert', data)
-})
+  socket.on('price_alert', (data) => {
+    state.alerts.unshift(data)
+    if (state.view === 'alerts') renderAlerts()
+  })
 
-// TODO: inicializar modulos y cargar datos iniciales
+  // Stats animation mock
+  setInterval(() => {
+    const el = document.getElementById('stat-markets')
+    if (el) {
+      const n = parseInt(el.textContent.replace(/\./g, '')) + Math.floor(Math.random() * 3)
+      el.textContent = n.toLocaleString('es-ES')
+    }
+    const el2 = document.getElementById('stat-signals')
+    if (el2 && Math.random() > 0.7) {
+      const n = parseInt(el2.textContent) + 1
+      el2.textContent = n
+    }
+  }, 3000)
+}

frontend/src/charts.js

@@ -1,14 +1,72 @@
 /**
- * Módulo de gráficos de historial de precios.
- *
- * Tecnología: Chart.js
+ * Módulo de gráficos usando Chart.js.
  *
  * Funciones:
- *   - Renderizar línea de precios YES/NO de un mercado seleccionado
- *   - Actualizar datos en tiempo real cuando llega 'market_update'
- *   - Opcional: mostrar punto de entrada de posiciones abiertas
- *
- * Se vincula al panel de detalle de mercado.
+ *   - renderDetailChart(canvasId, currentPrice)
+ *   - renderSparkline(containerId, price, side)
  */
 
 import { Chart } from 'chart.js/auto'
+
+let detailChartInstance = null
+
+export function renderDetailChart(canvasId, currentPrice) {
+  const ctx = document.getElementById(canvasId)
+  if (!ctx) return
+  if (detailChartInstance) detailChartInstance.destroy()
+
+  const base = currentPrice * 100
+  const pts = Array.from({ length: 8 }, (_, i) => {
+    const noise = (Math.random() - 0.5) * 8
+    return Math.max(5, Math.min(95, base - 12 + (i / 7) * 12 + noise))
+  })
+  pts[pts.length - 1] = base
+
+  const col = base > 50 ? '#22d37a' : base < 40 ? '#f04040' : '#f0a020'
+
+  detailChartInstance = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels: ['7d', '6d', '5d', '4d', '3d', '2d', '1d', 'now'],
+      datasets: [
+        {
+          data: pts,
+          borderColor: col,
+          borderWidth: 1.5,
+          pointRadius: 0,
+          fill: false,
+          tension: 0.4,
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: { legend: { display: false }, tooltip: { enabled: false } },
+      scales: { x: { display: false }, y: { display: false } },
+      animation: { duration: 600 },
+    },
+  })
+}
+
+export function renderSparkline(containerId, price, side) {
+  const el = document.getElementById(containerId)
+  if (!el) return
+  el.innerHTML = ''
+  el.className = 'sparkline'
+
+  const base = price * 100
+  for (let i = 0; i < 12; i++) {
+    const h = Math.max(4, Math.min(24, base / 4 + (Math.random() - 0.5) * 8))
+    const d = document.createElement('div')
+    d.className = 'spark-bar'
+    d.style.height = h + 'px'
+    d.style.background = side === 'yes' ? '#0d6e3a' : '#7a1a1a'
+    el.appendChild(d)
+  }
+  const last = document.createElement('div')
+  last.className = 'spark-bar'
+  last.style.height = Math.min(28, base / 3.5) + 'px'
+  last.style.background = side === 'yes' ? '#22d37a' : '#f04040'
+  el.appendChild(last)
+}

frontend/src/main.js

@@ -1,2 +1,4 @@
 import './style.css'
-import './app.js'
+import { init } from './app.js'
+
+init().catch((err) => console.error('Failed to initialize app:', err))

frontend/src/map.js

@@ -1,17 +1,142 @@
 /**
- * Módulo de visualización del mapa mundial interactivo.
- *
- * Tecnología: Leaflet.js
+ * Módulo de visualización del mapa mundial interactivo con Leaflet.js.
  *
  * Funciones:
- *   - Renderizar mapa base centrado en coordenadas por defecto
- *   - Dibujar burbujas (circle markers) por país usando countryCode (ISO2)
- *   - Color de burbuja según señal IA dominante (verde/amarillo/rojo)
- *   - Tamaño proporcional al volumen o liquidez del mercado
- *   - Popup al hacer click con detalle del mercado
- *
- * Recibe actualizaciones en tiempo real vía Socket.io desde app.js.
+ *   - init(containerId, markets, signals, onSelect)
+ *   - updateBubble(marketId, newPrice)
+ *   - highlightMarket(marketId)
  */
 
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
+
+// Coordenadas aproximadas por countryCode ISO2
+const COORDS = {
+  US: [37.09, -95.71],
+  DE: [51.16, 10.45],
+  GB: [55.37, -3.43],
+  BR: [-14.23, -51.92],
+  CN: [35.86, 104.19],
+  IN: [20.59, 78.96],
+  KR: [35.90, 127.76],
+  SA: [23.88, 45.07],
+  FR: [46.22, 2.21],
+  JP: [36.20, 138.25],
+  AU: [-25.27, 133.77],
+  CA: [56.13, -106.34],
+  RU: [61.52, 105.31],
+  MX: [23.63, -102.55],
+  ZA: [-30.55, 22.93],
+}
+
+let mapInstance = null
+let bubbles = {} // marketId -> circle marker
+
+function getCoords(countryCode) {
+  return COORDS[countryCode?.toUpperCase()] || [20, 0]
+}
+
+function getSignalColor(signal) {
+  if (signal === 'bullish') return '#22d37a'
+  if (signal === 'bearish') return '#f04040'
+  return '#f0a020'
+}
+
+function getRadius(volumeEur) {
+  const v = volumeEur || 0
+  if (v > 2e6) return 18
+  if (v > 1e6) return 14
+  if (v > 500000) return 11
+  if (v > 200000) return 8
+  return 6
+}
+
+export function init(containerId, markets, signals, onSelect) {
+  const container = document.getElementById(containerId)
+  if (!container) return
+
+  mapInstance = L.map(container, {
+    zoomControl: false,
+    attributionControl: false,
+    minZoom: 2,
+    maxZoom: 6,
+    worldCopyJump: true,
+  }).setView([25, 10], 2)
+
+  // Dark tile layer (CartoDB Dark Matter)
+  L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+    attribution: '©OpenStreetMap ©CartoDB',
+    subdomains: 'abcd',
+    maxZoom: 19,
+  }).addTo(mapInstance)
+
+  markets.forEach((m) => {
+    const sig = signals.find((s) => s.marketId === m.id) || { signal: 'neutral' }
+    const color = getSignalColor(sig.signal)
+    const coords = getCoords(m.countryCode)
+    const radius = getRadius(m.volumeEur)
+
+    const circle = L.circleMarker(coords, {
+      radius,
+      fillColor: color,
+      color: color,
+      weight: 1.5,
+      opacity: 0.6,
+      fillOpacity: 0.22,
+    }).addTo(mapInstance)
+
+    const inner = L.circleMarker(coords, {
+      radius: Math.max(3, radius * 0.45),
+      fillColor: color,
+      color: 'transparent',
+      fillOpacity: 0.8,
+    }).addTo(mapInstance)
+
+    const label = L.marker(coords, {
+      icon: L.divIcon({
+        className: 'map-label',
+        html: `<span class="map-label-text">${m.countryCode || 'GL'}</span>`,
+        iconSize: [40, 14],
+        iconAnchor: [20, -radius - 4],
+      }),
+      interactive: false,
+    }).addTo(mapInstance)
+
+    const popupContent = `
+      <div class="map-popup">
+        <div class="map-popup-cat">${m.category || 'General'} · ${m.countryCode || 'GL'}</div>
+        <div class="map-popup-q">${m.question}</div>
+        <div class="map-popup-prices">
+          <span class="text-green">SÍ ${Math.round((m.yesPrice || 0) * 100)}¢</span>
+          <span class="text-red">NO ${Math.round((m.noPrice || 0) * 100)}¢</span>
+        </div>
+      </div>
+    `
+    circle.bindPopup(popupContent, { closeButton: false, offset: [0, -4] })
+
+    circle.on('click', () => {
+      onSelect(m.id)
+    })
+
+    bubbles[m.id] = { circle, inner, label, color }
+  })
+}
+
+export function updateBubble(marketId, newPrice) {
+  const b = bubbles[marketId]
+  if (!b) return
+  // Slightly adjust radius based on new activity (mock behavior)
+  const newRadius = b.circle.getRadius() + (Math.random() > 0.5 ? 0.5 : -0.5)
+  b.circle.setRadius(Math.max(5, Math.min(22, newRadius)))
+}
+
+export function highlightMarket(marketId) {
+  Object.values(bubbles).forEach((b) => {
+    b.circle.setStyle({ weight: 1.5, opacity: 0.6 })
+  })
+  const b = bubbles[marketId]
+  if (b) {
+    b.circle.setStyle({ weight: 3, opacity: 1, color: '#4a9eff' })
+    b.circle.openPopup()
+  }
+}

frontend/src/simulator.js

@@ -1,11 +1,67 @@
 /**
- * Módulo de interfaz del simulador de posiciones.
+ * Módulo del simulador de posiciones virtuales.
  *
  * Funciones:
- *   - Mostrar formulario para abrir posición virtual (YES/NO, capital)
- *   - Solicitar fracción de Kelly desde services/kelly.js vía API
- *   - Renderizar lista de posiciones abiertas con P&L en vivo
- *   - Botón de cierre de posición y cálculo de resultado final
- *
- * Usa userId=1 fijo para la demo.
+ *   - init(state)
+ *   - openPosition(marketId, outcome, amount)
+ *   - closePosition(positionId)
  */
+
+import * as api from './api.js'
+
+let appState = null
+
+export function init(state) {
+  appState = state
+}
+
+export async function openPosition(marketId, outcome, amount) {
+  const amt = parseFloat(amount)
+  if (!amt || amt <= 0) {
+    alert('Introduce una cantidad válida')
+    return
+  }
+
+  const m = appState.markets.find((x) => x.id === marketId)
+  if (!m) return
+
+  const entryPrice = outcome === 'YES' ? m.yesPrice : m.noPrice
+  const data = {
+    marketId,
+    outcome,
+    amountEur: amt,
+    entryPrice,
+  }
+
+  try {
+    const created = await api.createPosition(data)
+    appState.positions.push(created)
+  } catch (e) {
+    // Fallback: create locally if API unavailable
+    const fakeId = Date.now()
+    appState.positions.push({
+      id: fakeId,
+      marketId,
+      outcome,
+      amountEur: amt,
+      entryPrice,
+      currentPrice: entryPrice,
+      pnl: 0,
+      kellyFraction: 0.2,
+      openedAt: new Date().toISOString(),
+    })
+  }
+
+  // Trigger re-render via app.js if needed
+  document.dispatchEvent(new CustomEvent('positions:changed'))
+}
+
+export async function closePosition(positionId) {
+  try {
+    await api.closePosition(positionId)
+  } catch (e) {
+    console.warn('API closePosition failed, removing locally')
+  }
+  appState.positions = appState.positions.filter((p) => p.id !== positionId)
+  document.dispatchEvent(new CustomEvent('positions:changed'))
+}

frontend/src/style.css

@@ -1,12 +1,1061 @@
-/*
- * Estilos visuales del dashboard PolySignal.
- *
- * Incluye:
- *   - Layout principal y grid del dashboard
- *   - Estilos del mapa Leaflet y burbujas de mercado por país
- *   - Paneles de señales IA (bullish / bearish / neutral)
- *   - Componentes del simulador de posiciones y watchlist
- *   - Diseño responsive básico para hackathon
- *
- * Puro CSS vanilla, sin preprocesadores.
- */
+@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@400;500;600;700&display=swap');
+
+:root {
+  --bg: #0a0c10;
+  --bg2: #111318;
+  --bg3: #181c24;
+  --bg4: #1e232d;
+  --border: rgba(255,255,255,0.08);
+  --border2: rgba(255,255,255,0.13);
+  --text: #e8eaf0;
+  --text2: #8b90a0;
+  --text3: #555b6e;
+  --green: #22d37a;
+  --green2: #0d6e3a;
+  --green3: #052a17;
+  --red: #f04040;
+  --red2: #7a1a1a;
+  --red3: #2d0808;
+  --blue: #4a9eff;
+  --blue2: #1a4a80;
+  --blue3: #081830;
+  --amber: #f0a020;
+  --amber2: #7a4e08;
+  --amber3: #2d1c02;
+  --accent: #4a9eff;
+
+  --sidebar-width: 240px;
+  --sidebar-collapsed: 56px;
+  --topbar-height: 56px;
+  --panel-gap: 16px;
+  --radius: 10px;
+  --radius-sm: 6px;
+
+  /* Fluid typography scale */
+  --fs-p:  clamp(16px, 1.15vw, 18px);
+  --fs-h1: clamp(28px, 2.8vw, 36px);
+  --fs-h2: clamp(24px, 2.4vw, 30px);
+  --fs-h3: clamp(20px, 1.9vw, 24px);
+  --fs-h4: clamp(18px, 1.6vw, 20px);
+  --fs-h5: clamp(16px, 1.3vw, 18px);
+  --fs-h6: clamp(14px, 1.1vw, 16px);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body, #app {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Syne', sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Semantic type hierarchy (fluid) */
+p  { font-size: var(--fs-p);  line-height: 1.55; }
+h1 { font-size: var(--fs-h1); line-height: 1.15; font-weight: 700; }
+h2 { font-size: var(--fs-h2); line-height: 1.2;  font-weight: 700; }
+h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 600; }
+h4 { font-size: var(--fs-h4); line-height: 1.3;  font-weight: 600; }
+h5 { font-size: var(--fs-h5); line-height: 1.35; font-weight: 500; }
+h6 { font-size: var(--fs-h6); line-height: 1.4;  font-weight: 500; }
+
+/* ─── Layout principal ─── */
+.layout {
+  display: grid;
+  grid-template-areas:
+    "topbar topbar"
+    "sidebar main";
+  grid-template-columns: var(--sidebar-width) 1fr;
+  grid-template-rows: var(--topbar-height) 1fr;
+  height: 100vh;
+  width: 100vw;
+  transition: grid-template-columns 0.25s ease;
+}
+
+.layout.collapsed {
+  grid-template-columns: var(--sidebar-collapsed) 1fr;
+}
+
+/* ─── Sidebar ─── */
+.sidebar {
+  grid-area: sidebar;
+  background: var(--bg2);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: width 0.25s ease;
+  position: relative;
+}
+
+.sidebar-toggle {
+  position: absolute;
+  top: 12px;
+  right: -10px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--bg3);
+  border: 1px solid var(--border2);
+  color: var(--text2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 14px;
+  z-index: 10;
+  transition: transform 0.2s;
+}
+
+.layout.collapsed .sidebar-toggle {
+  transform: rotate(180deg);
+  right: -10px;
+}
+
+/* ─── Topbar Logo ─── */
+.topbar-logo {
+  position: absolute;
+  left: 16px;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.topbar-logo .logo-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--blue);
+  animation: pulse 2s ease-in-out infinite;
+  flex-shrink: 0;
+}
+
+.topbar-logo .logo-text {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: -0.3px;
+  white-space: nowrap;
+}
+
+.sidebar-nav {
+  flex: 1;
+  padding: 14px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  overflow-y: auto;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 14px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  color: var(--text2);
+  font-size: 16px;
+  font-weight: 500;
+  transition: background 0.15s, color 0.15s;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.nav-item:hover {
+  background: var(--bg3);
+  color: var(--text);
+}
+
+.nav-item.active {
+  background: var(--blue3);
+  color: var(--blue);
+  border: 0.5px solid var(--blue2);
+}
+
+.nav-icon {
+  font-size: 16px;
+  width: 20px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.nav-label {
+  opacity: 1;
+  transition: opacity 0.15s;
+}
+
+.layout.collapsed .nav-label {
+  opacity: 0;
+  width: 0;
+}
+
+.sidebar-footer {
+  padding: 14px;
+  border-top: 1px solid var(--border);
+  font-size: 14px;
+  color: var(--text3);
+  font-family: 'DM Mono', monospace;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.layout.collapsed .sidebar-footer {
+  opacity: 0;
+}
+
+/* ─── Topbar ─── */
+.topbar {
+  grid-area: topbar;
+  background: var(--bg2);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  padding-left: calc(var(--sidebar-width) + var(--panel-gap));
+  gap: 16px;
+  overflow: hidden;
+  position: relative;
+  transition: padding-left 0.25s ease;
+}
+
+.layout.collapsed .topbar {
+  padding-left: calc(var(--sidebar-collapsed) + var(--panel-gap));
+}
+
+.live-badge {
+  font-family: 'DM Mono', monospace;
+  font-size: 14px;
+  background: var(--green3);
+  color: var(--green);
+  border: 0.5px solid var(--green2);
+  padding: 6px 12px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.live-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--green);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.topbar-stats {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex: 1;
+  overflow: hidden;
+}
+
+.stat {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-shrink: 0;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: var(--text3);
+  font-family: 'DM Mono', monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.stat-val {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text);
+  font-family: 'DM Mono', monospace;
+}
+
+.stat-delta {
+  font-size: 14px;
+  font-family: 'DM Mono', monospace;
+}
+
+.stat-delta.up { color: var(--green); }
+.stat-delta.dn { color: var(--red); }
+.stat-delta.neutral { color: var(--text3); }
+
+.topbar-actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-shrink: 0;
+}
+
+.btn-ghost {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--blue);
+  border: 0.5px solid var(--blue2);
+  background: var(--blue3);
+  padding: 8px 16px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-family: 'Syne', sans-serif;
+  transition: opacity 0.15s;
+}
+
+.btn-ghost:hover {
+  opacity: 0.85;
+}
+
+.icon-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--bg3);
+  border: 0.5px solid var(--border2);
+  color: var(--text2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 16px;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.icon-btn:hover {
+  color: var(--text);
+  border-color: var(--border2);
+}
+
+/* ─── Main content ─── */
+.main {
+  grid-area: main;
+  overflow: auto;
+  padding: var(--panel-gap);
+  background: var(--bg);
+}
+
+/* Vistas */
+.view { display: none; }
+.view.active { display: block; height: 100%; }
+
+/* ─── Dashboard layout ─── */
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: 1fr 280px;
+  grid-template-rows: 1fr minmax(280px, 40%);
+  gap: var(--panel-gap);
+  height: 100%;
+  min-height: 0;
+}
+
+.panel {
+  background: var(--bg2);
+  border: 0.5px solid var(--border);
+  border-radius: var(--radius);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 14px;
+  border-bottom: 0.5px solid var(--border);
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s;
+}
+
+.panel-header:hover {
+  background: rgba(255,255,255,0.02);
+}
+
+.panel-title {
+  font-size: 14px;
+  color: var(--text3);
+  font-family: 'DM Mono', monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.panel-toggle {
+  font-size: 14px;
+  color: var(--text3);
+  transition: transform 0.2s;
+}
+
+.panel.collapsed .panel-toggle {
+  transform: rotate(-90deg);
+}
+
+.panel-body {
+  flex: 1;
+  overflow: auto;
+  padding: 12px;
+  min-height: 0;
+}
+
+.panel.collapsed .panel-body {
+  display: none;
+}
+
+.panel-subtitle {
+  font-size: 14px;
+  color: var(--text3);
+}
+
+.positions-separator {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 0.5px solid var(--border);
+}
+
+.panel-title.mb-sm {
+  margin-bottom: 8px;
+}
+
+.panel.full-height {
+  height: 100%;
+}
+
+.hidden {
+  display: none;
+}
+
+/* Panel mapa */
+.map-panel {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+}
+
+#map-container {
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
+  background: var(--bg3);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+/* Panel señales */
+.signals-panel {
+  grid-row: 1 / 3;
+  grid-column: 2 / 3;
+}
+
+.signals-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.market-card {
+  background: var(--bg3);
+  border: 0.5px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 14px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.market-card:hover {
+  border-color: var(--border2);
+}
+
+.market-card.active {
+  border-color: var(--blue2);
+  background: var(--blue3);
+}
+
+.market-cat {
+  font-size: 14px;
+  font-family: 'DM Mono', monospace;
+  color: var(--text3);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 4px;
+}
+
+.market-q {
+  font-size: 15px;
+  color: var(--text);
+  line-height: 1.4;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.market-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.prob-bar-wrap {
+  flex: 1;
+  min-width: 0;
+}
+
+.prob-bar-bg {
+  height: 5px;
+  background: var(--bg4);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.prob-bar-fill {
+  height: 100%;
+  border-radius: 2px;
+  width: var(--prob-width, 0%);
+  transition: width 0.8s ease;
+}
+
+.prob-val {
+  font-size: 15px;
+  font-weight: 600;
+  font-family: 'DM Mono', monospace;
+  flex-shrink: 0;
+}
+
+.signal-badge {
+  font-size: 14px;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: 'DM Mono', monospace;
+  letter-spacing: 0.04em;
+  flex-shrink: 0;
+}
+
+.sig-bull { background: var(--green3); color: var(--green); border: 0.5px solid var(--green2); }
+.sig-bear { background: var(--red3); color: var(--red); border: 0.5px solid var(--red2); }
+.sig-neut { background: var(--bg4); color: var(--text2); border: 0.5px solid var(--border2); }
+
+/* Panel detalle */
+.detail-panel {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.detail-panel .panel-body {
+  overflow-y: auto;
+}
+
+.detail-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  gap: 16px;
+}
+
+.detail-tag {
+  font-size: 14px;
+  color: var(--blue);
+  font-family: 'DM Mono', monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 4px;
+}
+
+.detail-q {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text);
+  line-height: 1.5;
+}
+
+.detail-meta {
+  font-size: 14px;
+  color: var(--text3);
+  font-family: 'DM Mono', monospace;
+  margin-top: 2px;
+}
+
+.detail-metrics {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.metric {
+  text-align: right;
+}
+
+.metric-label {
+  font-size: 14px;
+  color: var(--text3);
+  font-family: 'DM Mono', monospace;
+  margin-bottom: 2px;
+}
+
+.metric-value {
+  font-size: 14px;
+  font-weight: 700;
+  font-family: 'DM Mono', monospace;
+}
+
+.metric-sep {
+  width: 1px;
+  height: 40px;
+  background: var(--border);
+}
+
+.outcomes-row {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.outcome-card {
+  flex: 1;
+  background: var(--bg3);
+  border: 0.5px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 14px;
+  text-align: center;
+}
+
+.outcome-name {
+  font-size: 14px;
+  color: var(--text2);
+  margin-bottom: 4px;
+  font-family: 'DM Mono', monospace;
+}
+
+.outcome-price {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text);
+  font-family: 'DM Mono', monospace;
+}
+
+.outcome-delta {
+  font-size: 14px;
+  font-family: 'DM Mono', monospace;
+  margin-top: 2px;
+}
+
+.outcome-card.yes .outcome-price { color: var(--green); }
+.outcome-card.no .outcome-price { color: var(--red); }
+
+.chart-container {
+  flex: 2;
+  background: var(--bg3);
+  border: 0.5px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 14px;
+  min-height: 120px;
+  height: 160px;
+  max-height: 160px;
+  overflow: hidden;
+}
+
+.chart-container canvas {
+  max-height: 130px;
+}
+
+.chart-label {
+  font-size: 14px;
+  color: var(--text3);
+  font-family: 'DM Mono', monospace;
+  margin-bottom: 6px;
+}
+
+.ai-box {
+  background: var(--bg3);
+  border: 0.5px solid var(--blue2);
+  border-radius: var(--radius-sm);
+  padding: 14px;
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  margin-bottom: 10px;
+}
+
+.ai-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  background: var(--blue3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 14px;
+}
+
+.ai-label {
+  font-size: 14px;
+  color: var(--blue);
+  font-family: 'DM Mono', monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 3px;
+}
+
+.ai-text {
+  font-size: 15px;
+  color: var(--text2);
+  line-height: 1.5;
+}
+
+.sim-row {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.sim-label {
+  font-size: 15px;
+  color: var(--text3);
+  font-family: 'DM Mono', monospace;
+}
+
+.sim-input {
+  background: var(--bg3);
+  border: 0.5px solid var(--border2);
+  border-radius: var(--radius-sm);
+  padding: 8px 14px;
+  color: var(--text);
+  font-size: 16px;
+  font-family: 'DM Mono', monospace;
+  width: 100px;
+  outline: none;
+}
+
+.sim-input:focus {
+  border-color: var(--blue2);
+}
+
+.sim-btn-yes {
+  background: var(--green3);
+  border: 0.5px solid var(--green2);
+  color: var(--green);
+  font-size: 15px;
+  font-weight: 600;
+  padding: 8px 16px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-family: 'DM Mono', monospace;
+  transition: opacity 0.15s;
+}
+
+.sim-btn-no {
+  background: var(--red3);
+  border: 0.5px solid var(--red2);
+  color: var(--red);
+  font-size: 15px;
+  font-weight: 600;
+  padding: 8px 16px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-family: 'DM Mono', monospace;
+  transition: opacity 0.15s;
+}
+
+.sim-btn-yes:hover, .sim-btn-no:hover {
+  opacity: 0.85;
+}
+
+.sim-disclaimer {
+  font-size: 14px;
+  color: var(--text3);
+  font-family: 'DM Mono', monospace;
+}
+
+/* ─── Legend inline ─── */
+.legend {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 14px;
+  color: var(--text3);
+  font-family: 'DM Mono', monospace;
+}
+
+.legend-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.legend-dot.green { background: var(--green); }
+.legend-dot.red { background: var(--red); }
+.legend-dot.gray { background: var(--text3); }
+
+.legend.end { margin-left: auto; }
+
+/* ─── Positions / Watchlist views ─── */
+.table-wrap {
+  overflow: auto;
+  border: 0.5px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg3);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 16px;
+}
+
+th, td {
+  padding: 14px 14px;
+  text-align: left;
+  border-bottom: 0.5px solid var(--border);
+}
+
+th {
+  font-family: 'DM Mono', monospace;
+  font-size: 14px;
+  color: var(--text3);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: 500;
+  background: var(--bg4);
+  position: sticky;
+  top: 0;
+}
+
+tr:hover td {
+  background: rgba(255,255,255,0.02);
+}
+
+td {
+  color: var(--text);
+}
+
+.td-mono {
+  font-family: 'DM Mono', monospace;
+}
+
+.td-green { color: var(--green); }
+.td-red { color: var(--red); }
+.td-blue { color: var(--blue); }
+
+.empty-state {
+  padding: 40px;
+  text-align: center;
+  color: var(--text3);
+  font-size: 16px;
+}
+
+/* ─── Leaflet overrides ─── */
+#app .leaflet-container {
+  background: var(--bg3);
+  font-family: 'DM Mono', monospace;
+}
+
+#app .leaflet-popup-content-wrapper {
+  background: var(--bg2);
+  color: var(--text);
+  border: 0.5px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+
+#app .leaflet-popup-tip {
+  background: var(--bg2);
+}
+
+/* ─── Sparklines ─── */
+.sparkline {
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  height: 32px;
+  margin-top: 6px;
+}
+
+.spark-bar {
+  width: 3px;
+  border-radius: 1px;
+  background: var(--blue2);
+  transition: height 0.3s;
+}
+
+/* ─── Animations ─── */
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+/* ─── Scrollbar ─── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text3); }
+
+/* ─── Utilities ─── */
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flex-start {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.flex-row {
+  display: flex;
+  align-items: center;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.gap-6 {
+  gap: 14px;
+}
+
+.gap-8 {
+  gap: 16px;
+}
+
+.text-green { color: var(--green); }
+.text-red { color: var(--red); }
+.text-blue { color: var(--blue); }
+.text-amber { color: var(--amber); }
+.text-neutral { color: var(--text3); }
+
+.bg-green { background: var(--green); }
+.bg-red { background: var(--red); }
+.bg-amber { background: var(--amber); }
+
+.flex-1 { flex: 1; }
+
+.font-mono { font-family: 'DM Mono', monospace; }
+
+.text-xs { font-size: 14px; }
+.text-sm { font-size: 14px; }
+.text-base { font-size: 15px; }
+.text-lg { font-size: 16px; }
+.text-xl { font-size: 18px; }
+
+.font-semibold { font-weight: 600; }
+.font-bold { font-weight: 700; }
+
+.mb-4 { margin-bottom: 4px; }
+.mb-6 { margin-bottom: 6px; }
+.mb-8 { margin-bottom: 8px; }
+.mt-4 { margin-top: 4px; }
+.mt-6 { margin-top: 6px; }
+.ml-auto { margin-left: auto; }
+
+.divider {
+  height: 1px;
+  background: var(--border);
+  margin: 8px 0;
+}
+
+.empty-state-sm {
+  padding: 16px;
+  text-align: center;
+  color: var(--text3);
+  font-size: 16px;
+}
+
+/* Map popup */
+.map-popup {
+  font-family: 'Syne', sans-serif;
+  font-size: 15px;
+  color: var(--text);
+  max-width: 200px;
+}
+
+.map-popup-cat {
+  font-size: 14px;
+  color: var(--text3);
+  font-family: 'DM Mono', monospace;
+  margin-bottom: 4px;
+  text-transform: uppercase;
+}
+
+.map-popup-q {
+  font-weight: 600;
+  margin-bottom: 4px;
+  line-height: 1.3;
+}
+
+.map-popup-prices {
+  display: flex;
+  gap: 16px;
+  font-family: 'DM Mono', monospace;
+  font-size: 15px;
+}
+
+.map-label-text {
+  color: var(--text2);
+  font-family: 'DM Mono', monospace;
+  font-size: 14px;
+  text-shadow: 0 1px 2px #000;
+}
+
+/* ─── Responsive ─── */
+@media (max-width: 1024px) {
+  .dashboard-grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+  }
+  .signals-panel {
+    grid-row: auto;
+    grid-column: auto;
+    max-height: 400px;
+  }
+  .map-panel {
+    grid-row: auto;
+    grid-column: auto;
+    min-height: 300px;
+  }
+  .detail-panel {
+    grid-row: auto;
+    grid-column: auto;
+  }
+}
+
+@media (max-width: 640px) {
+  .layout {
+    grid-template-columns: 0 1fr;
+  }
+  .sidebar { display: none; }
+  .topbar-stats { display: none; }
+  .outcomes-row { flex-direction: column; }
+}

package.json

@@ -19,7 +19,7 @@
     "db:studio": "npm run db:studio --workspace=backend"
   },
   "engines": {
-    "node": ">=22.0.0"
+    "node": ">=26.0.0"
   },
   "keywords": [
     "polymarket",

polysignal_app_mockup.html

@@ -0,0 +1,450 @@
+
+<h2 class="sr-only">Mockup interactivo de PolySignal — dashboard con mapa global de predicciones y panel de señales IA</h2>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@500;600;700&display=swap');
+*{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#0a0c10;--bg2:#111318;--bg3:#181c24;--bg4:#1e232d;
+  --border:#ffffff14;--border2:#ffffff22;
+  --text:#e8eaf0;--text2:#8b90a0;--text3:#555b6e;
+  --green:#22d37a;--green2:#0d6e3a;--green3:#052a17;
+  --red:#f04040;--red2:#7a1a1a;--red3:#2d0808;
+  --blue:#4a9eff;--blue2:#1a4a80;--blue3:#081830;
+  --amber:#f0a020;--amber2:#7a4e08;--amber3:#2d1c02;
+  --accent:#4a9eff;
+}
+.app{background:var(--bg);border-radius:16px;border:0.5px solid var(--border2);overflow:hidden;font-family:'Syne',sans-serif}
+.topbar{background:var(--bg2);border-bottom:0.5px solid var(--border);padding:10px 16px;display:flex;align-items:center;gap:12px}
+.logo{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-0.3px;display:flex;align-items:center;gap:6px}
+.logo-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);animation:pulse 2s ease-in-out infinite}
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
+.live-badge{font-family:'DM Mono',monospace;font-size:10px;background:var(--green3);color:var(--green);border:0.5px solid var(--green2);padding:3px 8px;border-radius:4px;display:flex;align-items:center;gap:4px}
+.live-dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:pulse 1.5s ease-in-out infinite}
+.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
+.tg-btn{font-size:11px;font-weight:500;color:var(--blue);border:0.5px solid var(--blue2);background:var(--blue3);padding:4px 10px;border-radius:6px;cursor:pointer;font-family:'Syne',sans-serif}
+.stat-row{background:var(--bg2);border-bottom:0.5px solid var(--border);padding:8px 16px;display:flex;gap:24px}
+.stat{display:flex;align-items:center;gap:6px}
+.stat-label{font-size:10px;color:var(--text3);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:0.06em}
+.stat-val{font-size:13px;font-weight:600;color:var(--text);font-family:'DM Mono',monospace}
+.stat-delta{font-size:10px;font-family:'DM Mono',monospace}
+.stat-delta.up{color:var(--green)}
+.stat-delta.dn{color:var(--red)}
+.main{display:grid;grid-template-columns:1fr 220px}
+.map-area{padding:16px;border-right:0.5px solid var(--border)}
+.map-title{font-size:11px;color:var(--text3);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px;display:flex;align-items:center;gap:8px}
+.map-wrap{background:var(--bg3);border-radius:10px;border:0.5px solid var(--border);overflow:hidden;position:relative}
+.map-svg{width:100%;display:block}
+.signal-panel{padding:12px}
+.panel-title{font-size:10px;color:var(--text3);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px}
+.market-card{background:var(--bg3);border:0.5px solid var(--border);border-radius:8px;padding:10px;margin-bottom:8px;cursor:pointer;transition:border-color 0.15s}
+.market-card:hover{border-color:var(--border2)}
+.market-card.active{border-color:var(--blue2);background:var(--blue3)}
+.market-cat{font-size:9px;font-family:'DM Mono',monospace;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px}
+.market-q{font-size:11px;color:var(--text);line-height:1.4;font-weight:500;margin-bottom:8px}
+.market-footer{display:flex;align-items:center;justify-content:space-between}
+.prob-bar-wrap{flex:1;margin-right:8px}
+.prob-bar-bg{height:3px;background:var(--bg4);border-radius:2px;overflow:hidden}
+.prob-bar-fill{height:100%;border-radius:2px;transition:width 0.8s ease}
+.prob-val{font-size:11px;font-weight:600;font-family:'DM Mono',monospace}
+.signal-badge{font-size:9px;font-weight:600;padding:2px 6px;border-radius:4px;font-family:'DM Mono',monospace;letter-spacing:0.04em}
+.sig-bull{background:var(--green3);color:var(--green);border:0.5px solid var(--green2)}
+.sig-bear{background:var(--red3);color:var(--red);border:0.5px solid var(--red2)}
+.sig-neut{background:var(--bg4);color:var(--text2);border:0.5px solid var(--border2)}
+.detail-section{background:var(--bg2);border-top:0.5px solid var(--border);padding:14px 16px}
+.detail-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
+.detail-q{font-size:13px;font-weight:600;color:var(--text);line-height:1.5;max-width:380px}
+.detail-meta{font-size:10px;color:var(--text3);font-family:'DM Mono',monospace;margin-top:2px}
+.outcomes-row{display:flex;gap:8px;margin-bottom:12px}
+.outcome-card{flex:1;background:var(--bg3);border:0.5px solid var(--border);border-radius:8px;padding:10px;text-align:center}
+.outcome-name{font-size:10px;color:var(--text2);margin-bottom:4px;font-family:'DM Mono',monospace}
+.outcome-price{font-size:20px;font-weight:700;color:var(--text);font-family:'DM Mono',monospace}
+.outcome-delta{font-size:10px;font-family:'DM Mono',monospace;margin-top:2px}
+.outcome-card.yes .outcome-price{color:var(--green)}
+.outcome-card.no .outcome-price{color:var(--red)}
+.ai-box{background:var(--bg3);border:0.5px solid var(--blue2);border-radius:8px;padding:10px;display:flex;gap:10px;align-items:flex-start}
+.ai-icon{width:28px;height:28px;border-radius:6px;background:var(--blue3);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
+.ai-label{font-size:9px;color:var(--blue);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:3px}
+.ai-text{font-size:11px;color:var(--text2);line-height:1.5}
+.sim-row{display:flex;gap:8px;margin-top:10px;align-items:center}
+.sim-input{background:var(--bg3);border:0.5px solid var(--border2);border-radius:6px;padding:6px 10px;color:var(--text);font-size:12px;font-family:'DM Mono',monospace;width:80px;outline:none}
+.sim-btn-yes{background:var(--green3);border:0.5px solid var(--green2);color:var(--green);font-size:11px;font-weight:600;padding:6px 14px;border-radius:6px;cursor:pointer;font-family:'DM Mono',monospace}
+.sim-btn-no{background:var(--red3);border:0.5px solid var(--red2);color:var(--red);font-size:11px;font-weight:600;padding:6px 14px;border-radius:6px;cursor:pointer;font-family:'DM Mono',monospace}
+.sim-label{font-size:11px;color:var(--text3);font-family:'DM Mono',monospace}
+.legend{display:flex;gap:12px;align-items:center;margin-top:6px}
+.legend-item{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text3);font-family:'DM Mono',monospace}
+.legend-dot{width:8px;height:8px;border-radius:50%}
+@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.05)}}
+.bubble{cursor:pointer;transition:opacity 0.2s}
+.bubble:hover{opacity:0.85}
+.bubble.active-b circle{stroke-width:2;stroke:#4a9eff}
+@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
+.sparkline{display:flex;align-items:flex-end;gap:1.5px;height:28px;margin-top:4px}
+.spark-bar{width:3px;border-radius:1px;background:var(--blue2);transition:height 0.3s}
+</style>
+
+<div class="app">
+
+  <div class="topbar">
+    <div class="logo">
+      <div class="logo-dot"></div>
+      PolySignal
+    </div>
+    <div class="live-badge">
+      <div class="live-dot"></div>
+      LIVE
+    </div>
+    <div style="font-size:10px;color:var(--text3);font-family:'DM Mono',monospace">Polymarket · Finnhub · HuggingFace</div>
+    <div class="topbar-right">
+      <div class="tg-btn"><i class="ti ti-send" style="font-size:11px;margin-right:3px" aria-hidden="true"></i>Telegram alerts</div>
+      <div style="width:28px;height:28px;border-radius:50%;background:var(--bg3);border:0.5px solid var(--border2);display:flex;align-items:center;justify-content:center">
+        <i class="ti ti-bell" style="font-size:13px;color:var(--text2)" aria-hidden="true"></i>
+      </div>
+    </div>
+  </div>
+
+  <div class="stat-row">
+    <div class="stat">
+      <span class="stat-label">Markets</span>
+      <span class="stat-val" id="mkt-count">2,847</span>
+    </div>
+    <div class="stat">
+      <span class="stat-label">Volume 24h</span>
+      <span class="stat-val">$4.2M</span>
+      <span class="stat-delta up">+12.4%</span>
+    </div>
+    <div class="stat">
+      <span class="stat-label">AI signals</span>
+      <span class="stat-val" id="sig-count">183</span>
+      <span class="stat-delta up">bullish</span>
+    </div>
+    <div class="stat">
+      <span class="stat-label">Alerts sent</span>
+      <span class="stat-val">47</span>
+      <span class="stat-delta" style="color:var(--text3)">today</span>
+    </div>
+    <div style="margin-left:auto;display:flex;align-items:center;gap:6px">
+      <div class="legend">
+        <div class="legend-item"><div class="legend-dot" style="background:var(--green)"></div>bullish</div>
+        <div class="legend-item"><div class="legend-dot" style="background:var(--red)"></div>bearish</div>
+        <div class="legend-item"><div class="legend-dot" style="background:var(--text3)"></div>neutral</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="main">
+    <div class="map-area">
+      <div class="map-title">
+        <i class="ti ti-world" style="font-size:13px" aria-hidden="true"></i>
+        Global prediction map
+        <span style="font-size:9px;color:var(--text3)">· bubble size = volume · color = AI signal</span>
+      </div>
+      <div class="map-wrap">
+        <svg class="map-svg" viewBox="0 0 440 240" id="world-map">
+          <rect width="440" height="240" fill="#0e1218"/>
+          <g fill="#1e2530" stroke="#2a3040" stroke-width="0.4">
+            <path d="M35 90 Q55 75 90 80 Q120 85 130 100 Q140 115 125 125 Q110 135 85 130 Q60 125 45 115 Q30 105 35 90Z"/>
+            <path d="M88 100 Q115 95 135 105 Q155 115 160 130 Q165 145 145 155 Q125 165 105 158 Q85 150 80 135 Q75 120 88 100Z"/>
+            <path d="M148 88 Q175 80 195 92 Q215 104 218 118 Q221 132 205 140 Q189 148 168 142 Q147 136 142 122 Q137 108 148 88Z"/>
+            <path d="M195 78 Q225 68 255 76 Q280 84 288 98 Q296 112 285 124 Q274 136 248 138 Q222 140 204 128 Q186 116 185 102 Q184 88 195 78Z"/>
+            <path d="M250 80 Q278 70 305 80 Q330 90 335 108 Q340 126 320 136 Q300 146 275 140 Q250 134 242 118 Q234 102 250 80Z"/>
+            <path d="M310 72 Q345 62 375 75 Q400 88 405 105 Q410 122 392 132 Q374 142 345 138 Q316 134 305 118 Q294 102 310 72Z"/>
+            <path d="M45 145 Q70 138 90 148 Q110 158 112 172 Q114 186 96 192 Q78 198 58 190 Q38 182 36 168 Q34 154 45 145Z"/>
+            <path d="M100 140 Q130 132 155 145 Q175 158 176 175 Q177 192 158 198 Q139 204 116 196 Q93 188 90 173 Q87 158 100 140Z"/>
+            <path d="M320 135 Q345 128 365 140 Q382 152 380 168 Q378 184 360 190 Q342 196 325 187 Q308 178 308 163 Q308 148 320 135Z"/>
+            <path d="M200 150 Q228 142 250 155 Q268 168 266 185 Q264 202 244 208 Q224 214 206 204 Q188 194 187 177 Q186 160 200 150Z"/>
+            <path d="M380 65 Q400 60 415 68 Q428 76 425 88 Q422 100 408 104 Q394 108 382 100 Q370 92 372 80 Q374 68 380 65Z"/>
+          </g>
+          <g id="bubbles">
+            <g class="bubble active-b" id="b-usa" onclick="selectMarket('usa')">
+              <circle cx="95" cy="105" r="14" fill="#22d37a" fill-opacity="0.22" stroke="#22d37a" stroke-width="1" stroke-opacity="0.6"/>
+              <circle cx="95" cy="105" r="7" fill="#22d37a" fill-opacity="0.8"/>
+              <text x="95" y="128" text-anchor="middle" font-size="8" fill="#8b90a0" font-family="DM Mono,monospace">USA</text>
+            </g>
+            <g class="bubble" id="b-eur" onclick="selectMarket('eur')">
+              <circle cx="215" cy="98" r="11" fill="#f04040" fill-opacity="0.22" stroke="#f04040" stroke-width="1" stroke-opacity="0.6"/>
+              <circle cx="215" cy="98" r="5.5" fill="#f04040" fill-opacity="0.8"/>
+              <text x="215" y="118" text-anchor="middle" font-size="8" fill="#8b90a0" font-family="DM Mono,monospace">EU</text>
+            </g>
+            <g class="bubble" id="b-uk" onclick="selectMarket('uk')">
+              <circle cx="172" cy="85" r="8" fill="#8b90a0" fill-opacity="0.22" stroke="#8b90a0" stroke-width="1" stroke-opacity="0.5"/>
+              <circle cx="172" cy="85" r="4" fill="#8b90a0" fill-opacity="0.7"/>
+              <text x="172" y="102" text-anchor="middle" font-size="7" fill="#8b90a0" font-family="DM Mono,monospace">UK</text>
+            </g>
+            <g class="bubble" id="b-bra" onclick="selectMarket('bra')">
+              <circle cx="130" cy="175" r="9" fill="#22d37a" fill-opacity="0.22" stroke="#22d37a" stroke-width="1" stroke-opacity="0.5"/>
+              <circle cx="130" cy="175" r="4.5" fill="#22d37a" fill-opacity="0.75"/>
+              <text x="130" y="193" text-anchor="middle" font-size="7" fill="#8b90a0" font-family="DM Mono,monospace">BRA</text>
+            </g>
+            <g class="bubble" id="b-chn" onclick="selectMarket('chn')">
+              <circle cx="340" cy="105" r="16" fill="#f0a020" fill-opacity="0.22" stroke="#f0a020" stroke-width="1" stroke-opacity="0.6"/>
+              <circle cx="340" cy="105" r="8" fill="#f0a020" fill-opacity="0.8"/>
+              <text x="340" y="130" text-anchor="middle" font-size="8" fill="#8b90a0" font-family="DM Mono,monospace">CHN</text>
+            </g>
+            <g class="bubble" id="b-ind" onclick="selectMarket('ind')">
+              <circle cx="295" cy="130" r="10" fill="#22d37a" fill-opacity="0.22" stroke="#22d37a" stroke-width="1" stroke-opacity="0.5"/>
+              <circle cx="295" cy="130" r="5" fill="#22d37a" fill-opacity="0.75"/>
+              <text x="295" y="149" text-anchor="middle" font-size="7" fill="#8b90a0" font-family="DM Mono,monospace">IND</text>
+            </g>
+            <g class="bubble" id="b-kor" onclick="selectMarket('kor')">
+              <circle cx="378" cy="98" r="7" fill="#f04040" fill-opacity="0.2" stroke="#f04040" stroke-width="1" stroke-opacity="0.5"/>
+              <circle cx="378" cy="98" r="3.5" fill="#f04040" fill-opacity="0.75"/>
+              <text x="378" y="113" text-anchor="middle" font-size="7" fill="#8b90a0" font-family="DM Mono,monospace">KOR</text>
+            </g>
+            <g class="bubble" id="b-sau" onclick="selectMarket('sau')">
+              <circle cx="248" cy="128" r="8" fill="#8b90a0" fill-opacity="0.2" stroke="#8b90a0" stroke-width="1" stroke-opacity="0.4"/>
+              <circle cx="248" cy="128" r="4" fill="#8b90a0" fill-opacity="0.65"/>
+              <text x="248" y="144" text-anchor="middle" font-size="7" fill="#8b90a0" font-family="DM Mono,monospace">SAU</text>
+            </g>
+          </g>
+          <g>
+            <rect x="8" y="8" width="62" height="14" rx="3" fill="#0a0c10" fill-opacity="0.8"/>
+            <text x="12" y="18" font-size="8" fill="#555b6e" font-family="DM Mono,monospace">SELECTED: USA</text>
+          </g>
+        </svg>
+      </div>
+    </div>
+
+    <div class="signal-panel">
+      <div class="panel-title">AI signals — top markets</div>
+
+      <div class="market-card active" onclick="selectMarket('usa')">
+        <div class="market-cat">Politics · USA</div>
+        <div class="market-q">Will Trump sign the tax bill before June 2026?</div>
+        <div class="market-footer">
+          <div class="prob-bar-wrap">
+            <div class="prob-bar-bg"><div class="prob-bar-fill" style="width:73%;background:var(--green)"></div></div>
+          </div>
+          <span class="prob-val" style="color:var(--green);margin-right:6px">73¢</span>
+          <span class="signal-badge sig-bull">BULL</span>
+        </div>
+      </div>
+
+      <div class="market-card" onclick="selectMarket('eur')">
+        <div class="market-cat">Economy · EU</div>
+        <div class="market-q">ECB rate cut in June 2026?</div>
+        <div class="market-footer">
+          <div class="prob-bar-wrap">
+            <div class="prob-bar-bg"><div class="prob-bar-fill" style="width:34%;background:var(--red)"></div></div>
+          </div>
+          <span class="prob-val" style="color:var(--red);margin-right:6px">34¢</span>
+          <span class="signal-badge sig-bear">BEAR</span>
+        </div>
+      </div>
+
+      <div class="market-card" onclick="selectMarket('chn')">
+        <div class="market-cat">Trade · CHN</div>
+        <div class="market-q">US-China tariff deal before Q3 2026?</div>
+        <div class="market-footer">
+          <div class="prob-bar-wrap">
+            <div class="prob-bar-bg"><div class="prob-bar-fill" style="width:51%;background:var(--amber)"></div></div>
+          </div>
+          <span class="prob-val" style="color:var(--amber);margin-right:6px">51¢</span>
+          <span class="signal-badge sig-neut">NEUT</span>
+        </div>
+      </div>
+
+      <div class="market-card" onclick="selectMarket('bra')">
+        <div class="market-cat">Crypto · Global</div>
+        <div class="market-q">Bitcoin above $120k before July?</div>
+        <div class="market-footer">
+          <div class="prob-bar-wrap">
+            <div class="prob-bar-bg"><div class="prob-bar-fill" style="width:61%;background:var(--green)"></div></div>
+          </div>
+          <span class="prob-val" style="color:var(--green);margin-right:6px">61¢</span>
+          <span class="signal-badge sig-bull">BULL</span>
+        </div>
+      </div>
+
+      <div style="margin-top:10px;padding-top:10px;border-top:0.5px solid var(--border)">
+        <div class="panel-title">My positions</div>
+        <div style="background:var(--bg3);border-radius:8px;border:0.5px solid var(--border);padding:10px">
+          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">
+            <span style="font-size:10px;color:var(--text2);font-family:'DM Mono',monospace">Trump tax bill YES</span>
+            <span style="font-size:11px;font-weight:600;color:var(--green);font-family:'DM Mono',monospace">+$14.20</span>
+          </div>
+          <div style="display:flex;justify-content:space-between;align-items:center">
+            <span style="font-size:10px;color:var(--text2);font-family:'DM Mono',monospace">ECB cut NO</span>
+            <span style="font-size:11px;font-weight:600;color:var(--red);font-family:'DM Mono',monospace">-$3.80</span>
+          </div>
+          <div style="height:1px;background:var(--border);margin:8px 0"></div>
+          <div style="display:flex;justify-content:space-between;align-items:center">
+            <span style="font-size:10px;color:var(--text3);font-family:'DM Mono',monospace">Net P&L</span>
+            <span style="font-size:13px;font-weight:700;color:var(--green);font-family:'DM Mono',monospace">+$10.40</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="detail-section">
+    <div class="detail-header">
+      <div>
+        <div style="font-size:9px;color:var(--blue);font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px">
+          <i class="ti ti-map-pin" style="font-size:10px" aria-hidden="true"></i> USA · Politics · Polymarket
+        </div>
+        <div class="detail-q" id="detail-q">Will Trump sign the tax bill before June 2026?</div>
+        <div class="detail-meta" id="detail-meta">Vol: $1.24M · Liq: $340K · Closes: Jun 1 2026</div>
+      </div>
+      <div style="display:flex;gap:6px;align-items:center">
+        <div style="text-align:right">
+          <div style="font-size:9px;color:var(--text3);font-family:'DM Mono',monospace;margin-bottom:2px">24h change</div>
+          <div style="font-size:14px;font-weight:700;color:var(--green);font-family:'DM Mono',monospace">+4.2%</div>
+        </div>
+        <div style="width:1px;height:32px;background:var(--border);margin:0 4px"></div>
+        <div style="text-align:right">
+          <div style="font-size:9px;color:var(--text3);font-family:'DM Mono',monospace;margin-bottom:2px">Confidence</div>
+          <div style="font-size:14px;font-weight:700;color:var(--blue);font-family:'DM Mono',monospace">87%</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="outcomes-row">
+      <div class="outcome-card yes">
+        <div class="outcome-name">YES</div>
+        <div class="outcome-price">73¢</div>
+        <div class="outcome-delta up" style="color:var(--green)">▲ 3.1¢</div>
+        <div class="sparkline" id="spark-yes"></div>
+      </div>
+      <div class="outcome-card no">
+        <div class="outcome-name">NO</div>
+        <div class="outcome-price">27¢</div>
+        <div class="outcome-delta" style="color:var(--red)">▼ 3.1¢</div>
+        <div class="sparkline" id="spark-no"></div>
+      </div>
+      <div style="flex:2;background:var(--bg3);border:0.5px solid var(--border);border-radius:8px;padding:10px">
+        <div style="font-size:9px;color:var(--text3);font-family:'DM Mono',monospace;margin-bottom:6px">Price history 7d</div>
+        <canvas id="mini-chart" height="48"></canvas>
+      </div>
+    </div>
+
+    <div class="ai-box">
+      <div class="ai-icon">
+        <i class="ti ti-brain" style="font-size:15px;color:var(--blue)" aria-hidden="true"></i>
+      </div>
+      <div style="flex:1">
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px">
+          <div class="ai-label">AI analysis · HuggingFace Mistral-7B</div>
+          <span class="signal-badge sig-bull">BULLISH · 87%</span>
+          <span style="font-size:9px;color:var(--text3);font-family:'DM Mono',monospace;margin-left:auto">updated 2m ago</span>
+        </div>
+        <div class="ai-text" id="ai-text">Republican leadership confirmed 3 of 4 committee votes secured. News sentiment from 8 sources is positive (+0.72). Congressional timeline suggests signing window opens May 28-31. Key risk: Senate amendment process could delay beyond June 1.</div>
+      </div>
+    </div>
+
+    <div class="sim-row">
+      <span class="sim-label">Simulate position →</span>
+      <input class="sim-input" type="number" value="100" min="1" placeholder="$USDC"/>
+      <button class="sim-btn-yes" onclick="sendPrompt('¿Cuánto ganaría si pongo $100 en YES del mercado Trump tax bill al precio actual de 73¢?')">BUY YES ↗</button>
+      <button class="sim-btn-no">BUY NO</button>
+      <span style="font-size:10px;color:var(--text3);font-family:'DM Mono',monospace;margin-left:4px">Simulated · no real trading</span>
+    </div>
+  </div>
+
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
+<script>
+const markets = {
+  usa: {
+    q: 'Will Trump sign the tax bill before June 2026?',
+    meta: 'Vol: $1.24M · Liq: $340K · Closes: Jun 1 2026',
+    cat: 'USA · Politics · Polymarket',
+    yes: 73, no: 27, delta: '+4.2%', conf: '87%', signal: 'BULLISH',
+    ai: 'Republican leadership confirmed 3 of 4 committee votes secured. News sentiment from 8 sources is positive (+0.72). Congressional timeline suggests signing window opens May 28–31. Key risk: Senate amendment process could delay beyond June 1.'
+  },
+  eur: {
+    q: 'Will the ECB cut rates in June 2026?',
+    meta: 'Vol: $890K · Liq: $210K · Closes: Jun 12 2026',
+    cat: 'EU · Economy · Polymarket',
+    yes: 34, no: 66, delta: '-2.1%', conf: '74%', signal: 'BEARISH',
+    ai: 'Eurozone inflation surprised to the upside at 2.4% in April. ECB governing council members\'s recent statements signal a pause is more likely. Bond market pricing implies only 22% probability of a June cut vs Polymarket\'s 34% — divergence is notable.'
+  },
+  chn: {
+    q: 'Will a US-China tariff deal be reached before Q3 2026?',
+    meta: 'Vol: $2.1M · Liq: $580K · Closes: Jul 1 2026',
+    cat: 'CHN · Trade · Polymarket',
+    yes: 51, no: 49, delta: '+0.8%', conf: '52%', signal: 'NEUTRAL',
+    ai: 'Negotiations ongoing but no formal framework agreed. Trade flows show early tariff evasion patterns suggesting both sides are playing for time. AI confidence is low — too many geopolitical variables. Monitoring for USTR statement as key signal.'
+  },
+  bra: {
+    q: 'Will Bitcoin exceed $120,000 before July 2026?',
+    meta: 'Vol: $3.4M · Liq: $920K · Closes: Jul 1 2026',
+    cat: 'Crypto · Global · Polymarket',
+    yes: 61, no: 39, delta: '+6.3%', conf: '79%', signal: 'BULLISH',
+    ai: 'BTC currently at $103,400. On-chain metrics show accumulation from large wallets. ETF inflows +$820M this week. Options market implies 68% probability of $120K by end of June. Sentiment score: 0.81 (strongly positive across 14 news sources).'
+  }
+};
+
+let activeMarket = 'usa';
+let chartInst = null;
+
+function selectMarket(id) {
+  activeMarket = id;
+  const m = markets[id];
+  document.getElementById('detail-q').textContent = m.q;
+  document.getElementById('detail-meta').textContent = m.meta;
+  document.getElementById('ai-text').textContent = m.ai;
+  document.querySelectorAll('.market-card').forEach((c,i) => {
+    const ids = ['usa','eur','chn','bra'];
+    c.classList.toggle('active', ids[i] === id);
+  });
+  document.querySelectorAll('.bubble').forEach(b => b.classList.remove('active-b'));
+  const bel = document.getElementById('b-'+id);
+  if(bel) bel.classList.add('active-b');
+  document.querySelector('#world-map text').textContent = 'SELECTED: '+id.toUpperCase();
+  buildChart(m);
+}
+
+function buildChart(m) {
+  const ctx = document.getElementById('mini-chart').getContext('2d');
+  if(chartInst) chartInst.destroy();
+  const base = m.yes;
+  const pts = Array.from({length:8},(_,i)=>{
+    const noise = (Math.random()-0.5)*8;
+    return Math.max(5,Math.min(95, base - 12 + (i/7)*12 + noise));
+  });
+  pts[pts.length-1] = base;
+  const col = base > 50 ? '#22d37a' : base < 40 ? '#f04040' : '#f0a020';
+  chartInst = new Chart(ctx,{
+    type:'line',
+    data:{
+      labels:['7d','6d','5d','4d','3d','2d','1d','now'],
+      datasets:[{data:pts,borderColor:col,borderWidth:1.5,pointRadius:0,fill:false,tension:0.4}]
+    },
+    options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false},tooltip:{enabled:false}},scales:{x:{display:false},y:{display:false}},animation:{duration:600}}
+  });
+  buildSparklines(m);
+}
+
+function buildSparklines(m) {
+  ['yes','no'].forEach(side => {
+    const el = document.getElementById('spark-'+side);
+    el.innerHTML = '';
+    const base = side==='yes' ? m.yes : m.no;
+    for(let i=0;i<12;i++){
+      const h = Math.max(4, Math.min(24, base/4 + (Math.random()-0.5)*8));
+      const d = document.createElement('div');
+      d.className='spark-bar';
+      d.style.height = h+'px';
+      d.style.background = side==='yes'?'#0d6e3a':'#7a1a1a';
+      el.appendChild(d);
+    }
+    const last = document.createElement('div');
+    last.className='spark-bar';
+    last.style.height = Math.min(28,base/3.5)+'px';
+    last.style.background = side==='yes'?'#22d37a':'#f04040';
+    el.appendChild(last);
+  });
+}
+
+let counter = 2847;
+let sigCounter = 183;
+setInterval(()=>{
+  counter += Math.floor(Math.random()*3);
+  sigCounter += Math.random()>0.7 ? 1 : 0;
+  document.getElementById('mkt-count').textContent = counter.toLocaleString();
+  document.getElementById('sig-count').textContent = sigCounter;
+}, 3000);
+
+buildChart(markets[activeMarket]);
+</script>