:root{--cyan: #00c8e0;--cyan-dk: #0099b8;--teal: #00e5d0;--bg: #e8e8e8;--white: #ffffff;--dark: #1a2b3c;--green: #00d68f;--orange: #ff7043;--purple: #7c4dff;--yellow: #ffd600}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--dark);height:100vh;display:flex;flex-direction:column;overflow:hidden}header{background:var(--cyan);display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:58px;z-index:1000;box-shadow:0 2px 12px #00c8e059;flex-shrink:0}.logo{font-size:1.45rem;font-weight:800;color:var(--white);letter-spacing:.5px}.logo span{color:var(--dark)}nav a{color:var(--white);text-decoration:none;margin-left:28px;font-weight:600;font-size:.95rem;opacity:.92;transition:opacity .2s}nav a:hover{opacity:1;border-bottom:2px solid #fff;padding-bottom:2px}#legend-bar{background:var(--white);display:flex;align-items:center;gap:18px;padding:8px 28px;font-size:.82rem;border-bottom:1px solid #ddd;flex-wrap:wrap;z-index:900;flex-shrink:0}#legend-bar strong{color:var(--cyan-dk);font-size:.9rem;margin-right:4px}.leg-item{display:flex;align-items:center;gap:6px;cursor:pointer;border-radius:20px;padding:3px 10px;transition:background .2s}.leg-item:hover{background:#f0fdff}.leg-item.inactive{opacity:.45}.leg-dot{width:14px;height:6px;border-radius:3px}#body{display:flex;flex:1;overflow:hidden;position:relative}#left-panel{width:290px;flex-shrink:0;background:var(--white);display:flex;flex-direction:column;box-shadow:3px 0 16px #0000001a;z-index:10;overflow:hidden}#mini-card{display:flex;align-items:center;gap:10px;padding:12px 14px 12px 20px;border-bottom:1px solid #f0f0f0;background:#fafafa;flex-shrink:0;min-height:68px}.mini-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--cyan) 0%,var(--teal) 100%);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px #00c8e066;font-size:1.3rem;overflow:hidden}.mini-avatar.intraurbano{background:linear-gradient(135deg,var(--orange) 0%,#ff9a76 100%);box-shadow:0 2px 8px #ff704366}.mini-info{flex:1;overflow:hidden}.mini-name{font-size:.82rem;font-weight:700;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-type{font-size:.68rem;color:#999;margin-top:2px}#route-detail{flex:1;overflow-y:auto;padding:16px 16px 8px 20px}.detail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px;color:#ccc;text-align:center;padding:2rem}.detail-empty svg{opacity:.4}.detail-empty p{font-size:.82rem;color:#bbb}.detail-heading{font-size:1.1rem;font-weight:800;color:var(--dark);margin-bottom:8px;line-height:1.3}.detail-badge{display:inline-block;padding:3px 12px;border-radius:20px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#fff;margin-bottom:10px}.detail-badge.cicloturismo{background:var(--purple)}.detail-badge.intraurbano{background:var(--orange)}.detail-desc{font-size:.8rem;line-height:1.6;color:#666;margin-bottom:8px}.detail-tip{margin-top:10px;background:#fffde7;border-left:3px solid var(--yellow);border-radius:0 8px 8px 0;padding:7px 10px;font-size:.76rem;color:#666}.detail-tip strong{color:#c49000}.detail-km{margin-top:10px;display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--cyan-dk);font-weight:600}#map{flex:1;z-index:1}#side-panel{position:absolute;top:12px;right:14px;width:260px;background:var(--white);border-radius:18px;box-shadow:0 6px 32px #0000002e;z-index:800;overflow:hidden;max-height:calc(100vh - 160px);display:flex;flex-direction:column}#side-panel-header{background:var(--cyan);color:#fff;padding:18px 24px;font-size:1.05rem;font-weight:800;letter-spacing:.2px;flex-shrink:0;display:flex;align-items:center;gap:8px}.sp-section{padding:9px 22px 8px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#666;background:#f5f8fa;border-bottom:1px solid #e4e8ec;border-top:1px solid #e4e8ec;position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:6px}#side-panel-scroll{overflow-y:auto;flex:1}.side-route{display:flex;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid #f0f0f0;cursor:pointer;transition:background .15s}.side-route:hover{background:#f0fdff}.side-route.active{background:#e4f9fb;border-left:3px solid var(--cyan);padding-left:19px}.side-route-icon{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#00c8a0,#00e5a0);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;box-shadow:0 2px 8px #00c8a040}.side-route-icon.intraurbano{background:linear-gradient(135deg,var(--orange) 0%,#ff9a76 100%);box-shadow:0 2px 8px #ff704340}.side-route-info{flex:1;min-width:0;display:flex;flex-direction:column}.side-route-name{font-size:.88rem;font-weight:700;color:var(--dark);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-route-km{font-size:.76rem;color:var(--cyan-dk);font-weight:600;margin-top:3px}.side-route.active .side-route-name{color:var(--cyan-dk)}#stats-bar{position:absolute;bottom:22px;left:50%;transform:translate(-50%);background:#fffffff2;border-radius:40px;box-shadow:0 4px 24px #00000026;display:flex;overflow:hidden;z-index:800;backdrop-filter:blur(8px)}.stat-item{padding:10px 22px;text-align:center;border-right:1px solid #eee}.stat-item:last-child{border-right:none}.stat-val{font-size:1.1rem;font-weight:800;color:var(--cyan-dk)}.stat-lbl{font-size:.68rem;color:#888;text-transform:uppercase;letter-spacing:.5px}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:var(--cyan);border-radius:4px}#top-stats{display:none;align-items:center;justify-content:center;background:var(--white);border-bottom:1px solid #e8e8e8;padding:6px 0;gap:0;flex-shrink:0;z-index:900}.ts-item{display:flex;flex-direction:column;align-items:center;padding:0 20px}.ts-val{font-size:1rem;font-weight:800;color:var(--cyan-dk);line-height:1.2}.ts-lbl{font-size:.6rem;color:#aaa;text-transform:uppercase;letter-spacing:.4px}.ts-sep{width:1px;height:28px;background:#ececec}#fab-routes,#mobile-sheet{display:none}.sheet-handle{width:36px;height:4px;background:#ddd;border-radius:2px;margin:10px auto 0;cursor:pointer}#mobile-sheet-body{padding:14px 16px 24px}@media (max-width: 860px){header{padding:0 18px}.logo{font-size:1.1rem}#top-stats{display:flex}#stats-bar,#left-panel{display:none}#side-panel{top:8px;right:8px;width:220px;max-height:calc(100vh - 120px)}.sp-legend{flex-wrap:wrap;gap:4px}#mobile-sheet{display:block;position:absolute;bottom:0;left:0;right:0;background:var(--white);border-radius:18px 18px 0 0;box-shadow:0 -4px 28px #00000024;z-index:850;max-height:42vh;overflow-y:auto;transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1)}#mobile-sheet.open{transform:translateY(0)}#stats-bar{bottom:18px}}@media (max-width: 540px){header{padding:0 12px;height:50px}.logo{font-size:.9rem}.logo span{display:none}nav a{font-size:.78rem;margin-left:10px}#legend-bar{padding:5px 12px;gap:8px;font-size:.75rem}#legend-bar strong{display:none}#side-panel{top:auto!important;bottom:0;right:0;left:0;width:100%!important;border-radius:18px 18px 0 0;max-height:62vh;transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);box-shadow:0 -4px 28px #0000002e}#side-panel.open{transform:translateY(0)}#side-panel .sp-drag{display:block!important}#mobile-sheet{max-height:48vh}#stats-bar{bottom:88px;left:12px;right:12px;transform:none;width:auto;justify-content:center}.stat-item{padding:8px 14px}.stat-val{font-size:.95rem}#fab-routes{display:flex;align-items:center;justify-content:center;position:absolute;bottom:24px;right:16px;width:54px;height:54px;border-radius:50%;background:var(--cyan);color:var(--white);border:none;font-size:1.5rem;cursor:pointer;z-index:900;box-shadow:0 4px 18px #00c8e073;transition:transform .18s,box-shadow .18s}#fab-routes:active{transform:scale(.9);box-shadow:0 2px 8px #00c8e04d}#fab-routes.active{background:var(--dark)}}