/* Map reference styles, scoped to preserve shared navigation. */
.hotspots-page { --bg: #0F0D17; --sidebar: #0C0A12; --surface: #17141F; --surface-2: #1D1927; --surface-3: #25202F; --glass: rgba(15, 12, 22, .91); --glass-strong: rgba(15, 12, 22, .98); --border: rgba(205, 178, 226, .14); --border-soft: rgba(194, 165, 216, .10); --text: #F7F3FB; --muted: #A197AA; --muted-2: #756C80; --purple: #7C3AED; --purple-hover: #6D28D9; --purple-soft: rgba(124, 58, 237, .14); --purple-light: #C48CF0; --red: #EF4444; --red-hover: #DC2626; --bottom-nav-height: 64px; --shadow: 0 24px 70px rgba(0, 0, 0, .35); --shadow-soft: 0 12px 34px rgba(0, 0, 0, .23); --ease: cubic-bezier(.22, 1, .36, 1); --button-ease: cubic-bezier(.2, .8, .2, 1); }
.hotspots-page * { box-sizing: border-box; }
.hotspots-page a { color: inherit; text-decoration: none; }
.hotspots-page button, .hotspots-page input { font: inherit; }
.hotspots-page button, .hotspots-page a { -webkit-tap-highlight-color: transparent; }
.hotspots-page button { border: 0; cursor: pointer; }
.hotspots-page button { position: relative; transform: translateZ(0); transition: transform .18s var(--button-ease), background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease; }
.hotspots-page button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .08); opacity: 0; pointer-events: none; transform: scale(.88); transition: opacity .18s ease, transform .22s var(--button-ease); }
.hotspots-page button:hover { transform: translateY(-1px); }
.hotspots-page button:hover::after { opacity: .45; transform: scale(1); }
.hotspots-page button:active { transform: scale(.96); }
.hotspots-page button:active::after { opacity: .75; transform: scale(.97); }
.hotspots-page #hotspotMap { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; background: #15141C; }
.hotspots-page .leaflet-tile-pane { filter: brightness(.84) saturate(.68) contrast(1.04); }
.hotspots-page .map-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient( 180deg, rgba(15, 12, 22, .14), transparent 22%, transparent 77%, rgba(15, 12, 22, .17) ); }
.hotspots-page .explore-header { position: absolute; top: 18px; left: 18px; z-index: 500; display: flex; align-items: center; gap: 11px; min-height: 58px; padding: 7px 16px 7px 8px; border: 1px solid var(--border); border-radius: 17px; background: var(--glass); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.hotspots-page .explore-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(124, 58, 237, .22); color: #D0A4F3; }
.hotspots-page .explore-copy h1 { margin: 0; font-size: .78rem; }
.hotspots-page .explore-copy p { margin: 4px 0 0; color: #908599; font-size: .5rem; }
.hotspots-page .map-tools { position: absolute; top: 18px; right: 18px; z-index: 500; display: flex; gap: 5px; padding: 5px; border: 1px solid var(--border); border-radius: 15px; background: var(--glass); box-shadow: var(--shadow-soft); }
.hotspots-page .map-tool { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 11px; background: transparent; color: #9F94A9; overflow: hidden; }
.hotspots-page .map-tool i { position: relative; z-index: 2; transition: transform .25s var(--button-ease), color .18s ease; }
.hotspots-page .map-tool:hover { background: rgba(255,255,255,.05); color: #FFFFFF; transform: translateY(-2px); }
.hotspots-page .map-tool:hover i { transform: scale(1.13); }
.hotspots-page .map-tool:active { transform: scale(.91); }
.hotspots-page .map-tool.is-active { background: var(--purple-soft); color: #C68FF1; box-shadow: inset 0 0 0 1px rgba(170, 108, 228, .14); }
.hotspots-page .category-bar { position: absolute; top: 87px; left: 18px; z-index: 490; display: flex; gap: 5px; max-width: calc( 100% - 250px ); padding: 5px; overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--glass); box-shadow: var(--shadow-soft); scrollbar-width: none; }
.hotspots-page .category-bar::-webkit-scrollbar { display: none; }
.hotspots-page .category-sheet-header { display: none; }
.hotspots-page .violeta-chip { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 35px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #9F95A8; font-size: .54rem; font-weight: 600; white-space: nowrap; overflow: hidden; }
.hotspots-page .violeta-chip i, .hotspots-page .violeta-chip span { position: relative; z-index: 2; }
.hotspots-page .violeta-chip i { color: #9C87AC; transition: transform .22s var(--button-ease), color .18s ease; }
.hotspots-page .violeta-chip:hover { background: rgba(255,255,255,.045); color: #EDE6F2; transform: translateY(-1px); }
.hotspots-page .violeta-chip:hover i { transform: scale(1.12); }
.hotspots-page .violeta-chip.active { background: var(--purple); color: #FFFFFF; box-shadow: 0 6px 16px rgba(124, 58, 237, .18); }
.hotspots-page .violeta-chip.active i { color: #FFFFFF; }
.hotspots-page .mobile-filter-trigger, .hotspots-page .category-backdrop { display: none; }
.hotspots-page .leaflet-top.leaflet-left { top: 142px; left: 18px; }
.hotspots-page .leaflet-control-zoom { display: flex !important; flex-direction: row !important; overflow: hidden !important; margin: 0 !important; border: 1px solid var(--border) !important; border-radius: 13px !important; background: rgba(15, 12, 22, .94) !important; box-shadow: var(--shadow-soft) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.hotspots-page .leaflet-control-zoom a { position: relative; display: grid !important; place-items: center !important; float: none !important; width: 42px !important; height: 42px !important; line-height: normal !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #C395E5 !important; font-size: 18px !important; font-weight: 400 !important; transition: background .18s ease, color .18s ease, transform .18s var(--button-ease) !important; }
.hotspots-page .leaflet-control-zoom a span { transition: transform .23s var(--button-ease); }
.hotspots-page .leaflet-control-zoom-out { order: 1 !important; border-radius: 12px 0 0 12px !important; }
.hotspots-page .leaflet-control-zoom-in { order: 2 !important; border-left: 1px solid rgba(196, 166, 216, .12) !important; border-radius: 0 12px 12px 0 !important; }
.hotspots-page .leaflet-control-zoom a + a { border-top: 0 !important; }
.hotspots-page .leaflet-control-zoom a:hover { background: rgba(124, 58, 237, .13) !important; color: #FFFFFF !important; transform: scale(1.04); }
.hotspots-page .leaflet-control-zoom a:hover span { transform: scale(1.16); }
.hotspots-page .leaflet-control-zoom a:active { background: rgba(124,58,237,.20) !important; transform: scale(.90); }
.hotspots-page .leaflet-control-zoom a.leaflet-disabled { background: transparent !important; color: #514959 !important; cursor: default; transform: none !important; }
.hotspots-page .map-right-controls { position: absolute; top: 87px; right: 18px; z-index: 510; }
.hotspots-page .map-round-control { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 13px; background: var(--glass); color: #AE7DD5; box-shadow: var(--shadow-soft); overflow: hidden; }
.hotspots-page .map-round-control i { position: relative; z-index: 2; transition: transform .26s var(--button-ease); }
.hotspots-page .map-round-control:hover { background: #1E1928; color: #D2A5F0; transform: translateY(-2px); }
.hotspots-page .map-round-control:hover i { transform: rotate(-8deg) scale(1.1); }
.hotspots-page .map-round-control:active { transform: scale(.91); }
.hotspots-page .route-shell { position: absolute; left: 18px; bottom: 20px; z-index: 800; width: 390px; max-width: calc( 100% - 36px ); }
.hotspots-page .route-card { overflow: hidden; border: 1px solid var(--border); border-radius: 22px; background: var(--glass-strong); box-shadow: var(--shadow); }
.hotspots-page .route-launcher { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 70px; padding: 9px 11px; background: transparent; color: #FFFFFF; text-align: left; overflow: hidden; }
.hotspots-page .route-launcher:hover { background: rgba(124, 58, 237, .045); transform: none; }
.hotspots-page .route-launcher:active { transform: scale(.985); }
.hotspots-page .route-launcher-search { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; min-width: 0; }
.hotspots-page .route-launcher-icon { display: grid; place-items: center; flex: 0 0 43px; width: 43px; height: 43px; border-radius: 14px; background: rgba(124, 58, 237, .20); color: #CF9AF3; transition: transform .28s var(--button-ease), background .2s ease; }
.hotspots-page .route-launcher:hover
        .route-launcher-icon { transform: rotate(-4deg) scale(1.06); background: rgba(124, 58, 237, .27); }
.hotspots-page .route-launcher-copy { min-width: 0; }
.hotspots-page .route-launcher-copy strong { display: block; font-size: .72rem; }
.hotspots-page .route-launcher-copy small { display: block; margin-top: 4px; overflow: hidden; color: #918698; font-size: .48rem; text-overflow: ellipsis; white-space: nowrap; }
.hotspots-page .route-launcher-action { position: relative; z-index: 2; display: grid; place-items: center; flex: 0 0 35px; width: 35px; height: 35px; border-radius: 11px; background: rgba(124, 58, 237, .09); color: #B780E1; transition: transform .34s var(--ease), background .18s ease; }
.hotspots-page .route-card.is-open
        .route-launcher-action { transform: rotate(180deg); background: rgba(124, 58, 237, .16); }
.hotspots-page .route-content { height: 0; overflow: hidden; opacity: 0; transform: translateY(-7px); transition: height .4s var(--ease), opacity .22s ease, transform .4s var(--ease); }
.hotspots-page .route-card.is-open
        .route-content { opacity: 1; transform: translateY(0); }
.hotspots-page .route-content-inner { padding: 0 14px 14px; }
.hotspots-page .route-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.hotspots-page .route-panel-header h2 { margin: 0; font-size: .72rem; }
.hotspots-page .route-panel-header p { margin: 4px 0 0; color: #81778A; font-size: .47rem; }
.hotspots-page .route-collapse-btn { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .045); color: #94889C; overflow: hidden; }
.hotspots-page .route-collapse-btn i { position: relative; z-index: 2; transition: transform .2s var(--button-ease); }
.hotspots-page .route-collapse-btn:hover { background: rgba(255,255,255,.08); color: #FFFFFF; transform: translateY(-1px); }
.hotspots-page .route-collapse-btn:hover i { transform: scaleX(1.18); }
.hotspots-page .route-locations-card { position: relative; padding: 6px 48px 6px 39px; border: 1px solid var(--border-soft); border-radius: 16px; background: rgba(255,255,255,.025); }
.hotspots-page .route-location-line { position: absolute; top: 28px; bottom: 28px; left: 16px; display: flex; flex-direction: column; align-items: center; width: 18px; }
.hotspots-page .route-origin-dot { width: 9px; height: 9px; flex: 0 0 9px; border: 2px solid #C28BEC; border-radius: 50%; background: #1C1724; }
.hotspots-page .route-line { flex: 1; width: 1px; margin: 4px 0; background: repeating-linear-gradient( to bottom, rgba(182,130,220,.42) 0, rgba(182,130,220,.42) 4px, transparent 4px, transparent 8px ); }
.hotspots-page .route-destination-dot { color: #CB91EF; font-size: .69rem; }
.hotspots-page .route-location-row { padding: 7px 0; }
.hotspots-page .route-location-label { display: block; margin-bottom: 4px; color: #7D7386; font-size: .43rem; font-weight: 600; text-transform: uppercase; }
.hotspots-page .route-location-input { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 10px; border: 1px solid transparent; border-radius: 10px; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s var(--button-ease); }
.hotspots-page .route-location-input:hover { background: rgba(255,255,255,.025); }
.hotspots-page .route-location-input:focus-within { border-color: rgba(150, 87, 219, .7); background: #201B29; box-shadow: 0 0 0 3px rgba(124,58,237,.09); transform: translateY(-1px); }
.hotspots-page .route-location-input i { width: 15px; color: #9470B4; font-size: .64rem; transition: transform .2s var(--button-ease), color .18s ease; }
.hotspots-page .route-location-input:focus-within i { color: #CB95F0; transform: scale(1.08); }
.hotspots-page .route-location-input input { width: 100%; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; color: #F4EEF8; font-size: .62rem; }
.hotspots-page .route-location-input input::placeholder { color: #706678; }
.hotspots-page .route-location-divider { height: 1px; background: rgba(194,165,215,.08); }
.hotspots-page .route-switch-pill { position: absolute; top: 50%; right: 10px; display: grid; place-items: center; width: 31px; height: 31px; padding: 0; border: 1px solid rgba(194,164,215,.13); border-radius: 10px; background: #25202F; color: #A795B2; transform: translateY(-50%); overflow: hidden; }
.hotspots-page .route-switch-pill i { position: relative; z-index: 2; transition: transform .28s var(--button-ease); }
.hotspots-page .route-switch-pill:hover { background: rgba(124,58,237,.16); color: #D09BF3; transform: translateY(-50%) scale(1.06); }
.hotspots-page .route-switch-pill:hover i { transform: rotate(180deg); }
.hotspots-page .route-switch-pill:active { transform: translateY(-50%) scale(.91); }
.hotspots-page .route-search-results { position: relative; z-index: 80; }
.hotspots-page .route-search-results:not(:empty) { margin: 4px 0; overflow: hidden; border: 1px solid rgba(194,164,215,.12); border-radius: 10px; background: #211C2A; }
.hotspots-page .route-mode-section { margin-top: 13px; }
.hotspots-page .route-mode-label { margin-bottom: 7px; color: #817687; font-size: .46rem; }
.hotspots-page .route-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.hotspots-page .route-mode-btn { min-height: 44px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(255,255,255,.025); color: #94899C; overflow: hidden; }
.hotspots-page .route-mode-btn i { position: relative; z-index: 2; margin-right: 6px; transition: transform .22s var(--button-ease); }
.hotspots-page .route-mode-btn:hover { background: rgba(255,255,255,.045); color: #D8CCE0; transform: translateY(-1px); }
.hotspots-page .route-mode-btn:hover i { transform: scale(1.13); }
.hotspots-page .route-mode-btn.is-active { background: rgba(124,58,237,.15); color: #E1C5F4; border-color: rgba(170,106,228,.23); }
.hotspots-page .route-mode-btn.is-active:hover { background: rgba(124,58,237,.21); }
.hotspots-page .route-safety-card { margin-top: 13px; padding: 11px; border: 1px solid rgba(189,160,211,.10); border-radius: 14px; background: rgba(255,255,255,.025); }
.hotspots-page .route-safety-main { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 9px; }
.hotspots-page .route-safety-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(124,58,237,.11); color: #B87EE2; }
.hotspots-page .route-safety-eyebrow { display: block; color: #7E7486; font-size: .42rem; }
.hotspots-page .route-safety-level { display: block; margin-top: 2px; font-size: .59rem; }
.hotspots-page .route-safety-score { padding: 6px 9px; border-radius: 999px; background: rgba(124,58,237,.08); color: #BD88E5; font-size: .49rem; }
.hotspots-page .route-safety-meta, .hotspots-page .route-speed-readout { display: flex; gap: 7px; margin-top: 8px; color: #817689; font-size: .45rem; line-height: 1.4; }
.hotspots-page .route-speed-readout { color: #706677; }
.hotspots-page .route-launch-actions { margin-top: 10px; }
.hotspots-page .route-launch-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; border-radius: 12px; background: var(--purple); color: #FFFFFF; font-size: .6rem; font-weight: 700; overflow: hidden; box-shadow: 0 8px 20px rgba(124,58,237,.14); }
.hotspots-page .route-launch-btn i, .hotspots-page .route-launch-btn span { position: relative; z-index: 2; }
.hotspots-page .route-launch-btn i { transition: transform .25s var(--button-ease); }
.hotspots-page .route-launch-btn:hover { background: var(--purple-hover); box-shadow: 0 12px 24px rgba(124,58,237,.23); transform: translateY(-2px); }
.hotspots-page .route-launch-btn:hover i { transform: translate(2px, -2px) rotate(-8deg); }
.hotspots-page .route-launch-btn:active { transform: scale(.975); }
.hotspots-page .route-launch-meta { margin-top: 6px; color: #7E7486; font-size: .44rem; text-align: center; }
.hotspots-page .legend-red { background: #D90429; }
.hotspots-page .legend-orange { background: #F77F00; }
.hotspots-page .legend-yellow { background: #FFBA08; }
.hotspots-page .legend-blue { background: #3A86FF; }
.hotspots-page .hotspots-reports-panel { position: absolute; top: 18px; right: 18px; bottom: 18px; z-index: 1100; display: flex; flex-direction: column; width: 340px; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--glass-strong); box-shadow: var(--shadow); transition: opacity .23s ease, transform .34s var(--ease), visibility .23s ease; }
.hotspots-page .hotspots-reports-panel.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(22px); }
.hotspots-page .reports-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 13px; border-bottom: 1px solid rgba(194,165,215,.08); }
.hotspots-page .reports-header h3 { margin: 0; font-size: .72rem; }
.hotspots-page .reports-header p { margin: 4px 0 0; color: #877C90; font-size: .47rem; }
.hotspots-page .reports-close { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.045); color: #ACA1B5; overflow: hidden; }
.hotspots-page .reports-close i { position: relative; z-index: 2; transition: transform .22s var(--button-ease); }
.hotspots-page .reports-close:hover { background: rgba(255,255,255,.08); color: #FFFFFF; transform: rotate(2deg) scale(1.04); }
.hotspots-page .reports-close:hover i { transform: rotate(90deg); }
.hotspots-page .hotspots-reports-list { flex: 1; overflow-y: auto; padding: 10px; }
@media (max-width: 860px) {
.hotspots-page {  }
.hotspots-page .explore-header { top: calc( 9px + env(safe-area-inset-top) ); left: 9px; min-height: 44px; padding: 5px 10px 5px 5px; border-radius: 14px; }
.hotspots-page .explore-icon { width: 33px; height: 33px; }
.hotspots-page .explore-copy p { display: none; }
.hotspots-page .map-tools { top: calc( 9px + env(safe-area-inset-top) ); right: 9px; padding: 4px; }
.hotspots-page .map-tool { width: 35px; height: 35px; }
.hotspots-page .mobile-filter-trigger { position: absolute; top: calc( 62px + env(safe-area-inset-top) ); left: 9px; z-index: 620; display: flex; align-items: center; gap: 8px; min-height: 40px; max-width: calc( 100% - 74px ); padding: 0 12px; border: 1px solid var(--border); border-radius: 13px; background: rgba(15,12,22,.95); color: #FFFFFF; box-shadow: var(--shadow-soft); overflow: hidden; }
.hotspots-page .mobile-filter-trigger:hover { background: rgba(27,22,37,.97); transform: translateY(-1px); }
.hotspots-page .mobile-filter-trigger__icon { position: relative; z-index: 2; display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 8px; background: var(--purple-soft); color: var(--purple-light); transition: transform .22s var(--button-ease); }
.hotspots-page .mobile-filter-trigger:hover
            .mobile-filter-trigger__icon { transform: rotate(-5deg) scale(1.07); }
.hotspots-page .mobile-filter-trigger__copy { position: relative; z-index: 2; display: flex; align-items: center; gap: 5px; min-width: 0; font-size: .55rem; }
.hotspots-page #mobileFilterLabel { overflow: hidden; color: #AFA3B7; text-overflow: ellipsis; white-space: nowrap; }
.hotspots-page .category-backdrop { position: fixed; inset: 0; z-index: 1690; display: block; background: rgba(7,5,11,.40); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s ease; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.hotspots-page.category-sheet-open
            .category-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
.hotspots-page .category-bar { position: fixed; top: auto; right: 7px; bottom: calc( var(--bottom-nav-height) + env(safe-area-inset-bottom) + 7px ); left: 7px; z-index: 1700; display: flex; flex-direction: column; gap: 4px; width: auto; max-width: none; max-height: 70dvh; padding: 17px 8px 9px; overflow-y: auto; border: 1px solid var(--border); border-radius: 23px 23px 17px 17px; background: rgba(15,12,22,.99); box-shadow: 0 28px 80px rgba(0,0,0,.50); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(30px); transition: opacity .24s ease, transform .32s var(--ease), visibility .24s ease; }
.hotspots-page.category-sheet-open
            .category-bar { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.hotspots-page .category-sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 6px 10px; border-bottom: 1px solid rgba(194,165,216,.08); }
.hotspots-page .category-sheet-header strong { display: block; font-size: .68rem; }
.hotspots-page .category-sheet-header small { display: block; margin-top: 3px; color: #83778B; font-size: .45rem; }
.hotspots-page .category-sheet-close { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; background: rgba(255,255,255,.05); color: #A99EB1; overflow: hidden; }
.hotspots-page .category-sheet-close i { position: relative; z-index: 2; transition: transform .22s var(--button-ease); }
.hotspots-page .category-sheet-close:hover i { transform: rotate(90deg); }
.hotspots-page .violeta-chip { display: grid; grid-template-columns: 34px minmax(0,1fr) 20px; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 10px; border-radius: 12px; text-align: left; white-space: normal; }
.hotspots-page .violeta-chip i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.04); color: #AA84C3; }
.hotspots-page .violeta-chip::before { content: ""; position: absolute; inset: 4px; border-radius: 10px; background: rgba(124,58,237,.08); opacity: 0; transform: scale(.96); transition: opacity .18s ease, transform .22s var(--button-ease); }
.hotspots-page .violeta-chip:hover::before { opacity: 1; transform: scale(1); }
.hotspots-page .violeta-chip::after { content: ""; position: relative; justify-self: center; width: 18px; height: 18px; border: 1px solid rgba(190,160,211,.18); border-radius: 50%; background: transparent; opacity: 1; transform: none; }
.hotspots-page .violeta-chip.active { background: rgba(124,58,237,.11); color: #FFFFFF; box-shadow: none; }
.hotspots-page .violeta-chip.active::after { border: 5px solid var(--purple); background: #EDE9FE; }
.hotspots-page .leaflet-top.leaflet-left { top: calc( 111px + env(safe-area-inset-top) ); left: 9px; }
.hotspots-page .leaflet-control-zoom { display: flex !important; flex-direction: row !important; border-radius: 13px !important; }
.hotspots-page .leaflet-control-zoom a { width: 40px !important; height: 40px !important; font-size: 17px !important; }
.hotspots-page .leaflet-control-zoom-out { order: 1 !important; border-radius: 12px 0 0 12px !important; }
.hotspots-page .leaflet-control-zoom-in { order: 2 !important; border-left: 1px solid rgba(196,166,216,.12) !important; border-radius: 0 12px 12px 0 !important; }
.hotspots-page .leaflet-control-zoom a + a { border-top: 0 !important; }
.hotspots-page .map-right-controls { top: calc( 111px + env(safe-area-inset-top) ); right: 9px; }
.hotspots-page .map-round-control { width: 40px; height: 40px; }
.hotspots-page .route-shell { position: fixed; right: 8px; bottom: calc( var(--bottom-nav-height) + env(safe-area-inset-bottom) + 8px ); left: 8px; width: auto; max-width: none; }
.hotspots-page .route-card { border-radius: 18px; }
.hotspots-page .route-launcher { min-height: 58px; padding: 7px 9px; }
.hotspots-page .route-launcher-icon { width: 38px; height: 38px; flex-basis: 38px; }
.hotspots-page .route-launcher-copy small { max-width: calc( 100vw - 145px ); }
.hotspots-page .route-content { max-height: 68dvh; }
.hotspots-page .route-content-inner { padding: 2px 10px 11px; }
.hotspots-page .route-panel-header p { display: none; }
.hotspots-page .route-locations-card { padding: 6px 45px 6px 12px; }
.hotspots-page .route-location-line { display: none; }
.hotspots-page .route-location-input { min-height: 46px; background: rgba(255,255,255,.025); }
.hotspots-page .route-location-input input { height: 44px; }
.hotspots-page .route-mode-btn { min-height: 45px; }
.hotspots-page .hotspots-reports-panel { top: auto; right: 7px; bottom: calc( var(--bottom-nav-height) + env(safe-area-inset-bottom) + 7px ); left: 7px; width: auto; max-height: 66dvh; border-radius: 23px 23px 17px 17px; transform: translateY(0); }
.hotspots-page .hotspots-reports-panel.is-hidden { transform: translateY(28px); }
}
@media (max-width: 390px) {
.hotspots-page .explore-header { left: 7px; }
.hotspots-page .map-tools { right: 7px; }
.hotspots-page .map-tool { width: 32px; height: 32px; }
.hotspots-page .mobile-filter-trigger { left: 7px; max-width: calc( 100% - 67px ); }
.hotspots-page .leaflet-top.leaflet-left { left: 7px; }
.hotspots-page .map-right-controls { right: 7px; }
.hotspots-page .route-shell { right: 6px; left: 6px; }
}
.hotspots-page button:focus-visible, .hotspots-page a:focus-visible, .hotspots-page input:focus-visible { outline: 2px solid #C18BF0; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.hotspots-page *, .hotspots-page *::before, .hotspots-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Integration with the existing app shell and live route/report components. */
body.hotspots-reference { overflow: hidden; }
body.hotspots-reference .main-content { padding: 0; margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); max-width: none; height: 100dvh; min-height: 0; }
body.hotspots-reference .hotspots-page { width: 100%; height: 100%; margin: 0; padding: 0; color: var(--text); --bottom-nav-height: 80px; }
.hotspots-page .hotspots-map-stage { height: 100%; min-height: 0; }
.hotspots-page #hotspotMap { z-index: 1; }
.hotspots-page .route-content { max-height: calc(100dvh - 220px); }
.hotspots-page .route-card.is-open .route-content { height: auto; overflow-y: auto; }
.hotspots-page .route-mode-btn { font-size: .75rem; }
.hotspots-page .route-location-input input { font-size: 1rem; }
.hotspots-page #originResults, .hotspots-page #destResults { position: relative; inset: auto; z-index: 1; }
.hotspots-page #originResults .route-search-dropdown, .hotspots-page #destResults .route-search-dropdown { position: relative; inset: auto; max-height: 180px; background: var(--surface-2); color: var(--text); border-color: var(--border); box-shadow: none; }
.hotspots-page .route-search-item { color: var(--text); }
.hotspots-page .route-search-item__sub { color: var(--muted); }
.hotspots-page .route-feedback-floating { max-height: none; overflow: visible; }
.hotspots-page #routeAlert { color: var(--text); }
.hotspots-page #routeAlert.route-alert-coming-soon { color: var(--purple-light); }
.hotspots-page .route-safety-level { width: auto; height: auto; border: 0; background: transparent; box-shadow: none; }
.hotspots-page .legend-red { background: #ef4444; }
.hotspots-page .legend-orange { background: #f97316; }
.hotspots-page .legend-yellow { background: #facc15; }
.hotspots-page .legend-blue { background: #8b5cf6; }
.hotspots-page .hotspots-reports-panel { max-width: calc(100% - 36px); height: auto; }
.hotspots-page #hotspotMap .leaflet-control-zoom a { margin: 0; }
.hotspots-page .leaflet-control-attribution { font-size: 10px; background: rgba(15,12,22,.91); color: var(--muted); }
.hotspots-page .leaflet-control-attribution a { color: var(--purple-light); }
@media (max-width: 860px) and (min-width: 768px) {
  .hotspots-page .route-shell { position: absolute; left: 8px; right: 8px; bottom: 20px; }
  .hotspots-page .category-bar { left: calc(220px + 7px); bottom: 7px; }
  .hotspots-page .hotspots-reports-panel { bottom: 8px; }
}
@media (max-width: 767px) {
  body.hotspots-reference .main-content { margin-left: 0; width: 100%; height: calc(100dvh - 80px - env(safe-area-inset-bottom)); padding: 0; }
  .hotspots-page .route-shell { bottom: calc(104px + env(safe-area-inset-bottom)); }
  .hotspots-page .route-content { max-height: calc(100dvh - 290px - env(safe-area-inset-bottom)); }
  .hotspots-page .hotspots-reports-panel { bottom: 8px; max-width: none; }
}

/* Rediseño paso 4 (Explorar): superficies sólidas, tipografía legible y controles de 44 px. Solo apariencia. */
.hotspots-page {
  --glass: #1e1b2e;
  --glass-strong: #1e1b2e;
  --border: #2d2438;
  --border-soft: #2d2438;
  --surface: #1e1b2e;
  --surface-2: #282236;
  --text: #e9e3ef;
  --muted: #a9a1b3;
  --purple-light: #a78bfa;
  --shadow: 0 12px 32px rgba(0, 0, 0, .32);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, .16);
}

.hotspots-page .map-vignette { display: none; }
.hotspots-page .violeta-chip::before,
.hotspots-page button::after { display: none; }
.hotspots-page button:hover { transform: none; }
.hotspots-page button:active { transform: scale(.97); }
.hotspots-page .explore-header,
.hotspots-page .map-tools,
.hotspots-page .category-bar,
.hotspots-page .mobile-filter-trigger,
.hotspots-page .map-round-control,
.hotspots-page .leaflet-control-zoom,
.hotspots-page .category-backdrop {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Encabezado y herramientas del mapa */
.hotspots-page .explore-header { min-height: 56px; border-radius: 12px; padding: 6px 16px 6px 8px; }
.hotspots-page .explore-icon { width: 40px; height: 40px; border-radius: 8px; background: rgba(139, 92, 246, .16); color: #a78bfa; }
.hotspots-page .explore-copy h1 { font-size: 1.125rem; line-height: 1.3; font-weight: 700; }
.hotspots-page .explore-copy p { margin-top: 2px; color: #a9a1b3; font-size: .8125rem; line-height: 1.35; }
.hotspots-page .map-tools { border-radius: 12px; gap: 4px; }
.hotspots-page .map-tool { width: 44px; height: 44px; border-radius: 8px; color: #e9e3ef; font-size: 1rem; }
.hotspots-page .map-tool:hover { background: #282236; color: #ffffff; transform: none; }
.hotspots-page .map-tool:hover i { transform: none; }
.hotspots-page .map-tool.is-active { background: rgba(139, 92, 246, .2); color: #a78bfa; box-shadow: inset 0 0 0 1px #8b5cf6; }
.hotspots-page .map-round-control { width: 44px; height: 44px; border-radius: 12px; color: #a78bfa; }
.hotspots-page .map-round-control:hover { background: #282236; color: #c4b5fd; transform: none; }
.hotspots-page .map-round-control:hover i { transform: none; }
.hotspots-page .leaflet-control-zoom { border-radius: 12px !important; background: #1e1b2e !important; }
.hotspots-page .leaflet-control-zoom a { width: 44px !important; height: 44px !important; color: #e9e3ef !important; }
.hotspots-page .leaflet-control-zoom a:hover { background: #282236 !important; transform: none; }

/* Filtros: píldoras individuales sobre el mapa (escritorio) */
@media (min-width: 861px) {
  .hotspots-page .category-bar { top: 90px; gap: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; max-width: calc(100% - 250px); }
  .hotspots-page .violeta-chip { min-height: 38px; padding: 0 14px 0 10px; gap: 8px; border: 1px solid #2d2438; border-radius: 19px; background: #1e1b2e; color: #e9e3ef; font-size: .875rem; font-weight: 600; box-shadow: var(--shadow-soft); }
  .hotspots-page .violeta-chip i { color: #a78bfa; }
  .hotspots-page .violeta-chip:hover { background: #282236; color: #ffffff; transform: none; }
  .hotspots-page .violeta-chip:hover i { transform: none; }
  .hotspots-page .violeta-chip.active { border-color: #7c3aed; background: #7c3aed; color: #ffffff; box-shadow: var(--shadow-soft); }
  .hotspots-page .violeta-chip.active i { color: #ffffff; }
  .hotspots-page .leaflet-top.leaflet-left { top: 140px; }
}

/* Planeador de recorrido */
.hotspots-page .route-card { border-radius: 16px; box-shadow: var(--shadow); }
.hotspots-page .route-launcher { min-height: 64px; padding: 10px 12px; }
.hotspots-page .route-launcher:hover { background: #282236; }
.hotspots-page .route-launcher-icon { width: 44px; height: 44px; flex-basis: 44px; border-radius: 8px; background: rgba(139, 92, 246, .16); color: #a78bfa; }
.hotspots-page .route-launcher:hover .route-launcher-icon { transform: none; background: rgba(139, 92, 246, .24); }
.hotspots-page .route-launcher-copy strong { font-size: 1rem; line-height: 1.3; font-weight: 600; }
.hotspots-page .route-launcher-copy small { margin-top: 2px; color: #a9a1b3; font-size: .8125rem; }
.hotspots-page .route-launcher-action { width: 44px; height: 44px; flex-basis: 44px; border-radius: 8px; background: transparent; color: #a78bfa; }
.hotspots-page .route-card.is-open .route-launcher-action { background: transparent; }
.hotspots-page .route-content-inner { padding: 4px 16px 16px; }
.hotspots-page .route-panel-header { margin-bottom: 12px; }
.hotspots-page .route-panel-header h2 { font-size: 1.125rem; line-height: 1.35; font-weight: 700; }
.hotspots-page .route-panel-header p { margin-top: 2px; color: #a9a1b3; font-size: .875rem; }
.hotspots-page .route-collapse-btn { width: 44px; height: 44px; flex-basis: 44px; border-radius: 8px; background: transparent; color: #e9e3ef; }
.hotspots-page .route-collapse-btn:hover { background: #282236; transform: none; }
.hotspots-page .route-locations-card { border: 1px solid #2d2438; border-radius: 12px; background: transparent; padding-right: 56px; }
.hotspots-page .route-location-label { color: #a9a1b3; font-size: .8125rem; font-weight: 600; text-transform: none; }
.hotspots-page .route-location-input { min-height: 48px; border: 1px solid #766b82; border-radius: 8px; background: #282236; }
.hotspots-page .route-location-input:hover { background: #282236; border-color: #948b9c; }
.hotspots-page .route-location-input:focus-within { border-color: #a78bfa; background: #282236; box-shadow: 0 0 0 1px #a78bfa; transform: none; }
.hotspots-page .route-location-input i { width: 18px; color: #a78bfa; font-size: .9375rem; }
.hotspots-page .route-location-input:focus-within i { transform: none; color: #c4b5fd; }
.hotspots-page .route-location-input input { height: 46px; color: #e9e3ef; }
.hotspots-page .route-location-input input::placeholder { color: #948b9c; }
.hotspots-page .route-location-divider { background: transparent; height: 4px; }
.hotspots-page .route-origin-dot { border-color: #a78bfa; background: #1e1b2e; }
.hotspots-page .route-destination-dot { color: #a78bfa; font-size: .9375rem; }
.hotspots-page .route-switch-pill { width: 44px; height: 44px; border: 1px solid #766b82; border-radius: 8px; background: #1e1b2e; color: #e9e3ef; }
.hotspots-page .route-switch-pill:hover { background: #282236; color: #ffffff; transform: translateY(-50%); }
.hotspots-page .route-switch-pill:hover i { transform: none; }
.hotspots-page .route-search-results:not(:empty) { border: 1px solid #2d2438; border-radius: 8px; background: #282236; }
.hotspots-page .route-mode-label { color: #e9e3ef; font-size: .875rem; font-weight: 600; }
.hotspots-page .route-modes { gap: 8px; }
.hotspots-page .route-mode-btn { min-height: 48px; border: 1px solid #766b82; border-radius: 8px; background: transparent; color: #e9e3ef; font-size: .9375rem; font-weight: 600; }
.hotspots-page .route-mode-btn:hover { background: #282236; color: #ffffff; transform: none; }
.hotspots-page .route-mode-btn:hover i { transform: none; }
.hotspots-page .route-mode-btn.is-active,
.hotspots-page .route-mode-btn.is-active:hover { background: #7c3aed; border-color: #7c3aed; color: #ffffff; }
.hotspots-page .route-safety-card { padding: 12px; border: 1px solid #2d2438; border-radius: 12px; background: transparent; }
.hotspots-page .route-safety-main { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; }
.hotspots-page .route-safety-icon { width: 40px; height: 40px; border-radius: 8px; background: rgba(139, 92, 246, .16); color: #a78bfa; }
.hotspots-page .route-safety-eyebrow { color: #a9a1b3; font-size: .8125rem; }
.hotspots-page .route-safety-level { margin-top: 2px; font-size: 1rem; font-weight: 600; }
.hotspots-page .route-safety-score { padding: 4px 8px; border-radius: 8px; background: #282236; color: #e9e3ef; font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hotspots-page .route-safety-meta,
.hotspots-page .route-speed-readout { margin-top: 10px; color: #a9a1b3; font-size: .875rem; line-height: 1.45; }
.hotspots-page .route-launch-btn { min-height: 48px; border-radius: 8px; font-size: 1rem; font-weight: 600; box-shadow: none; }
.hotspots-page .route-launch-btn:hover { box-shadow: none; transform: none; }
.hotspots-page .route-launch-btn:hover i { transform: none; }
.hotspots-page .route-launch-meta { color: #a9a1b3; font-size: .8125rem; }

/* Leyenda */

/* Panel de reportes de la zona */
.hotspots-page .hotspots-reports-panel { border-radius: 16px; box-shadow: var(--shadow); }
.hotspots-page .reports-header { padding: 16px; border-bottom: 1px solid #2d2438; }
.hotspots-page .reports-header h3 { font-size: 1.125rem; line-height: 1.35; font-weight: 700; }
.hotspots-page .reports-header p { margin-top: 2px; color: #a9a1b3; font-size: .875rem; line-height: 1.4; }
.hotspots-page .reports-close { width: 44px; height: 44px; flex-basis: 44px; border-radius: 8px; background: transparent; color: #e9e3ef; }
.hotspots-page .reports-close:hover { background: #282236; color: #ffffff; transform: none; }
.hotspots-page .reports-close:hover i { transform: none; }
.hotspots-page .hotspots-reports-list { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.hotspots-page .hotspots-report-item { padding: 12px; border: 1px solid #2d2438; border-radius: 12px; background: #1e1b2e; }
.hotspots-page .hotspots-report-item__user { font-size: .9375rem; font-weight: 600; color: #e9e3ef; }
.hotspots-page .hotspots-report-item__time { color: #a9a1b3; font-size: .8125rem; }
.hotspots-page .hotspots-report-item__distance { padding: 2px 8px; border: 0; border-radius: 8px; background: #282236; color: #e9e3ef; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.hotspots-page .hotspots-report-item__badge { margin: 4px 0 8px; font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.hotspots-page .hotspots-report-item__badge.badge-lighting { color: #f7bd56; }
.hotspots-page .hotspots-report-item__badge.badge-sidewalk { color: #8eb9ff; }
.hotspots-page .hotspots-report-item__badge.badge-unsafe { color: #ff8e9e; }
.hotspots-page .hotspots-report-item__badge.badge-baldios { color: #5bdeb1; }
.hotspots-page .hotspots-report-item__badge.badge-other { color: #a78bfa; }
.hotspots-page .hotspots-report-item__caption { color: #e9e3ef; font-size: .9375rem; line-height: 1.45; }
.hotspots-page .hotspots-report-item__image { border: 1px solid #2d2438; border-radius: 8px; }
.hotspots-page .hotspots-report-item__image img { height: 160px; }
.hotspots-page .hotspots-report-empty { border: 1px dashed #766b82; border-radius: 12px; background: transparent; color: #a9a1b3; font-size: .9375rem; }

/* Móvil: hojas inferiores con esquinas de 16 px y asa */
@media (max-width: 860px) {
  .hotspots-page .explore-header { min-height: 48px; border-radius: 12px; }
  .hotspots-page .explore-icon { width: 36px; height: 36px; }
  .hotspots-page .explore-copy h1 { font-size: 1rem; }
  .hotspots-page .map-tool { width: 44px; height: 44px; }
  .hotspots-page .mobile-filter-trigger { min-height: 44px; padding: 0 14px 0 10px; border-radius: 12px; background: #1e1b2e; }
  .hotspots-page .mobile-filter-trigger:hover { background: #282236; transform: none; }
  .hotspots-page .mobile-filter-trigger__icon { width: 28px; height: 28px; flex-basis: 28px; border-radius: 8px; background: rgba(139, 92, 246, .16); color: #a78bfa; }
  .hotspots-page .mobile-filter-trigger:hover .mobile-filter-trigger__icon { transform: none; }
  .hotspots-page .mobile-filter-trigger__copy { font-size: .875rem; font-weight: 600; }
  .hotspots-page #mobileFilterLabel { color: #a9a1b3; font-weight: 400; }
  .hotspots-page .leaflet-top.leaflet-left { top: calc(120px + env(safe-area-inset-top)); }
  .hotspots-page .map-right-controls { top: calc(120px + env(safe-area-inset-top)); }
  .hotspots-page .map-round-control { width: 44px; height: 44px; }
  .hotspots-page .leaflet-control-zoom a { width: 44px !important; height: 44px !important; }
  .hotspots-page .category-backdrop { background: rgba(0, 0, 0, .6); }
  .hotspots-page .category-bar,
  .hotspots-page .hotspots-reports-panel { border-radius: 16px; background: #1e1b2e; box-shadow: var(--shadow); }
  .hotspots-page .category-bar { padding: 24px 12px 12px; gap: 4px; }
  .hotspots-page .category-bar::before,
  .hotspots-page .hotspots-reports-panel::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; border-radius: 2px; background: #766b82; transform: translateX(-50%); }
  .hotspots-page .hotspots-reports-panel::before { z-index: 1; }
  .hotspots-page .category-sheet-header { padding: 4px 4px 12px; border-bottom: 1px solid #2d2438; }
  .hotspots-page .category-sheet-header strong { font-size: 1.125rem; font-weight: 700; line-height: 1.35; }
  .hotspots-page .category-sheet-header small { margin-top: 2px; color: #a9a1b3; font-size: .875rem; }
  .hotspots-page .category-sheet-close { width: 44px; height: 44px; flex-basis: 44px; border-radius: 8px; background: transparent; color: #e9e3ef; }
  .hotspots-page .violeta-chip { min-height: 56px; border: 0; border-radius: 12px; background: transparent; color: #e9e3ef; font-size: .9375rem; font-weight: 600; box-shadow: none; }
  .hotspots-page .violeta-chip i { width: 36px; height: 36px; border-radius: 8px; background: rgba(139, 92, 246, .16); color: #a78bfa; }
  .hotspots-page .violeta-chip:hover { background: #282236; }
  .hotspots-page .violeta-chip.active { background: rgba(139, 92, 246, .16); }
  .hotspots-page .violeta-chip::after { border-color: #766b82; }
  .hotspots-page .violeta-chip.active::after { border: 5px solid #7c3aed; background: #e9e3ef; }
  .hotspots-page .route-card { border-radius: 16px; }
  .hotspots-page .route-launcher { min-height: 64px; padding: 10px 12px; }
  .hotspots-page .route-launcher-icon { width: 44px; height: 44px; flex-basis: 44px; }
  .hotspots-page .route-launcher-copy small { max-width: calc(100vw - 170px); }
  .hotspots-page .route-content-inner { padding: 4px 12px 12px; }
  .hotspots-page .route-panel-header p { display: block; }
  .hotspots-page .route-locations-card { padding: 6px 56px 6px 12px; }
  .hotspots-page .route-location-input { min-height: 48px; background: #282236; }
  .hotspots-page .route-mode-btn { min-height: 48px; }
  .hotspots-page .hotspots-reports-panel { padding-top: 12px; }
}
@media (max-width: 390px) {
  .hotspots-page .map-tool { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .hotspots-page .hotspots-report-item { animation: none; }
}

/* Ronda 2 (Explorar.dc.html / ExplorarEscritorio.dc.html): pines tipo gota, filas de reportes y aviso de ubicación. */
.hotspots-page .explore-topbar { display: none; }

.hotspots-page .hotspot-pin-icon { border: 0; background: none; }
.hotspots-page .hotspot-pin { position: relative; display: block; width: 34px; height: 42px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.hotspots-page .hotspot-pin svg { display: block; }
.hotspots-page .hotspot-pin__inner { position: absolute; top: 5px; left: 6px; display: grid; place-items: center; width: 22px; height: 22px; color: var(--pin); font-size: .75rem; line-height: 1; }
.hotspots-page .hotspot-pin__count { color: #ffffff; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hotspots-page .leaflet-marker-icon.hotspot-pin-icon:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; border-radius: 8px; }
.hotspots-page .leaflet-popup-content-wrapper { border-radius: 22px; background: #1a1825; color: #e9e3ef; box-shadow: 0 12px 32px rgba(0, 0, 0, .32); }
.hotspots-page .leaflet-popup-tip { background: #1a1825; }
.hotspots-page .leaflet-popup-content { margin: 14px 18px; font-size: .875rem; line-height: 1.45; }
.hotspots-page .leaflet-container a.leaflet-popup-close-button { color: #a9a1b3; }

.hotspots-page .violeta-chip i.cat-lighting { color: #f7bd56; }
.hotspots-page .violeta-chip i.cat-sidewalk { color: #8eb9ff; }
.hotspots-page .violeta-chip i.cat-unsafe { color: #ff8e9e; }
.hotspots-page .violeta-chip i.cat-baldios { color: #5bdeb1; }
.hotspots-page .violeta-chip.active i { color: #ffffff; }


.hotspots-page .reports-header { align-items: center; }
.hotspots-page .reports-header__copy { flex: 1; min-width: 0; }
.hotspots-page .reports-sort { flex: none; color: #a78bfa; font-size: .875rem; font-weight: 600; white-space: nowrap; }
.hotspots-page .reports-sort[hidden] { display: none; }
.hotspots-page .hotspots-reports-list { gap: 2px; }
.hotspots-page .hotspots-report-item { padding: 0; border: 0; border-radius: 22px; background: transparent; }
.hotspots-page .hotspots-report-row { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 8px 12px; border-radius: 22px; color: inherit; }
.hotspots-page a.hotspots-report-row:hover { background: #262335; }
.hotspots-page .hotspots-report-row__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--cat) 16%, transparent); color: var(--cat); font-size: 1.125rem; }
.hotspots-page .hotspots-report-row__body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.hotspots-page .hotspots-report-row__title { color: #e9e3ef; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.hotspots-page .hotspots-report-row__sub,
.hotspots-page .hotspots-report-row__note { color: #a9a1b3; font-size: .8125rem; line-height: 1.4; overflow-wrap: anywhere; }
.hotspots-page .hotspots-report-row__chevron { flex: none; color: #a9a1b3; font-size: .875rem; }
.hotspots-page .hotspots-location-needed { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border: 0; border-radius: 22px; background: #262335; color: #e9e3ef; text-align: left; }
.hotspots-page .hotspots-location-needed p { margin: 0; color: #e9e3ef; font-size: .9375rem; line-height: 1.45; }
.hotspots-page .hotspots-location-btn { min-height: 44px; padding: 0 20px; border-radius: 22px; background: #7c3aed; color: #ffffff; font-size: .9375rem; font-weight: 600; }
.hotspots-page .hotspots-location-btn:hover { background: #6d28d9; }

/* Móvil: cápsulas arriba, fila de chips, herramientas en columna y hoja inferior de 28 px */
@media (max-width: 860px) {
  .hotspots-page .explore-header { position: absolute !important; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
  .hotspots-page .explore-topbar { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 16px; left: 16px; z-index: 620; display: flex; align-items: center; gap: 8px; }
  .hotspots-page .explore-search-capsule { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; height: 48px; padding: 0 16px; border-radius: 24px; background: rgba(26, 24, 37, .96); color: #e9e3ef; font-size: 1rem; text-align: left; box-shadow: 0 2px 8px rgba(0, 0, 0, .16); }
  .hotspots-page .explore-search-capsule i { color: #a9a1b3; }
  .hotspots-page .explore-search-capsule span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hotspots-page .explore-search-capsule:hover { background: #262335; }
  .hotspots-page .explore-chat-capsule { display: grid; flex: none; place-items: center; width: 48px; height: 48px; margin-left: auto; border-radius: 50%; background: rgba(26, 24, 37, .96); color: #e9e3ef; font-size: 1.25rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .16); }
  .hotspots-page .explore-chat-capsule:hover { background: #262335; }

  .hotspots-page .category-bar { position: absolute; top: calc(72px + env(safe-area-inset-top)); right: 0; bottom: auto; left: 0; z-index: 610; flex-direction: row; gap: 8px; width: auto; max-width: none; max-height: none; padding: 0 16px 6px; overflow-x: auto; overflow-y: hidden; border: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; scrollbar-width: none; }
  .hotspots-page .category-bar::before { display: none; }
  .hotspots-page .violeta-chip { display: inline-flex; flex: none; align-items: center; gap: 8px; width: auto; min-height: 38px; padding: 0 16px 0 12px; border: 0; border-radius: 19px; background: rgba(26, 24, 37, .96); color: #e9e3ef; font-size: .875rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .16); }
  .hotspots-page .violeta-chip i { width: auto; height: auto; border-radius: 0; background: none; font-size: .875rem; }
  .hotspots-page .violeta-chip::after { display: none; }
  .hotspots-page .violeta-chip:hover { background: #262335; }
  .hotspots-page .violeta-chip.active { background: #7c3aed; color: #ffffff; }

  .hotspots-page .leaflet-top.leaflet-left { top: calc(124px + env(safe-area-inset-top)); left: 16px; }
  .hotspots-page .leaflet-control-zoom { border-radius: 22px !important; background: rgba(26, 24, 37, .96) !important; }
  .hotspots-page .leaflet-control-zoom-out { border-radius: 22px 0 0 22px !important; }
  .hotspots-page .leaflet-control-zoom-in { border-radius: 0 22px 22px 0 !important; }
  .hotspots-page .leaflet-bottom.leaflet-right { top: calc(176px + env(safe-area-inset-top)); right: auto; bottom: auto; left: 16px; }
  .hotspots-page .map-tools { top: calc(124px + env(safe-area-inset-top)); right: 16px; flex-direction: column; padding: 4px; border: 0; border-radius: 26px; background: rgba(26, 24, 37, .96); }
  .hotspots-page .map-tool { border-radius: 50%; }
  .hotspots-page .map-right-controls { top: calc(280px + env(safe-area-inset-top)); right: 16px; }
  .hotspots-page .map-round-control { border: 0; border-radius: 50%; background: rgba(26, 24, 37, .96); }

  .hotspots-page .hotspots-reports-panel { top: auto; right: 0; bottom: 0; left: 0; width: auto; max-width: none; max-height: min(360px, 48dvh); padding-top: 22px; border: 0; border-radius: 28px 28px 0 0; background: #1a1825; box-shadow: 0 12px 32px rgba(0, 0, 0, .32); }
  .hotspots-page .hotspots-reports-panel::before { top: 9px; width: 36px; height: 5px; border-radius: 3px; background: #3a3550; }
  .hotspots-page .reports-header { gap: 12px; padding: 0 12px 8px 20px; border-bottom: 0; }
  .hotspots-page .reports-header h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
  .hotspots-page .reports-header p { font-size: .8125rem; }
  .hotspots-page .hotspots-reports-list { padding: 4px 12px 16px; }

  /* El planeador se abre desde la cápsula "¿A dónde vas?" como hoja inferior; cerrado no ocupa el mapa. */
  .hotspots-page .route-shell { position: absolute; right: 0; bottom: 0; left: 0; }
  .hotspots-page .route-shell:has(.route-card:not(.is-open)) { display: none; }
  .hotspots-page .route-card { border: 0; border-radius: 28px 28px 0 0; background: #1a1825; }
  .hotspots-page .route-launcher { display: none; }
  .hotspots-page .route-content-inner { padding: 20px 16px 16px; }
  .hotspots-page:has(.route-card.is-open) .hotspots-reports-panel { visibility: hidden; opacity: 0; pointer-events: none; }
}

@media (max-width: 767px) {
  .hotspots-page .route-shell { bottom: 0; }
  .hotspots-page .hotspots-reports-panel { bottom: 0; }
  .hotspots-page .route-content { max-height: calc(100dvh - 210px - env(safe-area-inset-bottom)); }
}

/* Encabezado de la lista: título y subtítulo a la izquierda; "Más cercanos" justo antes de cerrar;
   cerrar (44 px) siempre en su propia columna al extremo derecho, así nada lo empuja. */
.hotspots-page .reports-header { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; column-gap: 8px; row-gap: 2px; }
.hotspots-page .reports-header__copy { display: contents; }
.hotspots-page .reports-header h3 { grid-column: 1; grid-row: 1; min-width: 0; }
.hotspots-page .reports-sort { grid-column: 2; grid-row: 1; justify-self: end; }
.hotspots-page .reports-close { grid-column: 3; grid-row: 1; justify-self: end; }
.hotspots-page .reports-header p { grid-column: 1 / 3; grid-row: 2; margin: 0; }
.hotspots-page .reports-close:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }

/* Escritorio (ExplorarEscritorio.dc.html): mapa completo con paneles flotantes redondeados */
@media (min-width: 861px) {
  .hotspots-page .explore-header { min-height: 64px; padding: 8px 20px 8px 10px; border: 0; border-radius: 22px; background: rgba(26, 24, 37, .96); }
  .hotspots-page .explore-icon { border-radius: 50%; }
  .hotspots-page .explore-copy h1 { font-size: 1.25rem; }
  .hotspots-page .category-bar { top: 96px; }
  .hotspots-page .violeta-chip { border: 0; background: rgba(26, 24, 37, .96); }
  .hotspots-page .violeta-chip:hover { background: #262335; }
  .hotspots-page .violeta-chip.active { background: #7c3aed; }
  .hotspots-page .leaflet-top.leaflet-left { top: 146px; }
  .hotspots-page .leaflet-control-zoom { border: 0 !important; border-radius: 22px !important; background: rgba(26, 24, 37, .96) !important; }
  .hotspots-page .leaflet-control-zoom-out { border-radius: 22px 0 0 22px !important; }
  .hotspots-page .leaflet-control-zoom-in { border-radius: 0 22px 22px 0 !important; }
  .hotspots-page .map-tools { padding: 4px; border: 0; border-radius: 26px; background: rgba(26, 24, 37, .96); }
  .hotspots-page .map-tool { border-radius: 50%; }
  .hotspots-page .map-right-controls { top: 90px; }
  .hotspots-page .map-round-control { border: 0; border-radius: 50%; background: rgba(26, 24, 37, .96); }

  .hotspots-page .route-shell { bottom: 18px; }
  .hotspots-page .route-card { border: 0; border-radius: 28px; background: #1a1825; }
  .hotspots-page .route-launcher { min-height: 68px; padding: 10px 14px; border-radius: 28px; }
  .hotspots-page .route-launcher-icon { border-radius: 50%; }

  /* Panel de reportes: debajo de las herramientas para no taparlas */
  .hotspots-page .hotspots-reports-panel { top: 146px; right: 18px; bottom: auto; width: 360px; max-height: calc(100% - 164px); padding-top: 8px; border: 0; border-radius: 28px; background: #1a1825; }
  .hotspots-page .hotspots-reports-list { min-height: 0; }
  .hotspots-page .reports-header { padding: 12px 12px 8px 20px; border-bottom: 0; }
  .hotspots-page .reports-header h3 { font-size: 1.125rem; }
  .hotspots-page .hotspots-reports-list { padding: 4px 8px 16px; }
  .hotspots-page:has(.hotspots-reports-panel:not(.is-hidden)) .category-bar { max-width: calc(100% - 36px - 378px); }
}

/* Planeador de recorrido (ACTUALIZACIÓN 3: RutaPlaneador, RutaBuscando, RutaLista, RutaEscritorio) */
.hotspots-page .route-content-inner { display: flex; flex-direction: column; gap: 12px; }
.hotspots-page .route-panel-header { margin: 0; padding: 0 6px; }
.hotspots-page .route-panel-header h2 { font-size: 1.25rem; line-height: 1.3; }
.hotspots-page .route-collapse-btn { border-radius: 50%; background: #262335; }
.hotspots-page .route-collapse-btn:hover { background: #2e2a42; }

.hotspots-page .route-locations-card { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 0; border-radius: 24px; background: #262335; }
.hotspots-page .route-location-connector { position: absolute; top: 46px; left: 35px; width: 2px; height: 38px; background: #3a3550; pointer-events: none; }
.hotspots-page .route-location-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 56px 0 14px; border-radius: 18px; transition: background-color .14s ease, box-shadow .14s ease; }
.hotspots-page .route-location-row:focus-within { background: #12101c; box-shadow: inset 0 0 0 2px #a78bfa; }
.hotspots-page .route-location-marker { display: flex; flex: none; justify-content: center; width: 20px; color: #a78bfa; font-size: 1.125rem; }
.hotspots-page .route-location-marker--origin::before { content: ""; box-sizing: border-box; width: 12px; height: 12px; border: 3px solid #8b5cf6; border-radius: 50%; background: #12101c; }
.hotspots-page .route-location-field { flex: 1; min-width: 0; }
.hotspots-page .route-location-row .route-location-label { display: block; margin: 0; color: #a9a1b3; font-size: .8125rem; font-weight: 400; line-height: 1.3; text-transform: none; }
.hotspots-page .route-location-field input { display: block; width: 100%; height: auto; min-height: 24px; padding: 0; border: 0; outline: 0; background: none; color: #e9e3ef; font-size: 1rem; line-height: 1.5; text-overflow: ellipsis; }
.hotspots-page .route-location-field input::placeholder { color: #a9a1b3; }
.hotspots-page .route-location-field input:focus-visible { outline: none; }
.hotspots-page .route-location-field input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.hotspots-page .route-clear-dest { display: grid; flex: none; place-items: center; width: 44px; height: 44px; margin-right: -8px; padding: 0; border-radius: 50%; background: transparent; color: #a9a1b3; }
.hotspots-page .route-clear-dest[hidden] { display: none; }
.hotspots-page .route-clear-dest:hover { background: #262335; color: #e9e3ef; }
.hotspots-page .route-locations-card .route-switch-pill { position: absolute; top: 50%; right: 12px; display: grid; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #1a1825; color: #e9e3ef; transform: translateY(-50%); }
.hotspots-page .route-locations-card .route-switch-pill:hover { background: #2e2a42; transform: translateY(-50%); }

/* Resultados: mismas filas para origen y destino */
.hotspots-page #originResults:not(:empty),
.hotspots-page #destResults:not(:empty) { margin: 0; border: 0; background: transparent; }
.hotspots-page #originResults .route-search-dropdown,
.hotspots-page #destResults .route-search-dropdown { position: relative; top: auto; display: flex; flex-direction: column; gap: 2px; max-height: none !important; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.hotspots-page .route-search-heading { margin: 4px 8px 6px; color: #a9a1b3; font-size: .8125rem; font-weight: 600; line-height: 1.4; }
.hotspots-page .route-search-foot { margin: 8px 8px 4px; color: #a9a1b3; font-size: .8125rem; line-height: 1.4; }
.hotspots-page .route-search-dropdown .route-search-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 8px 10px; border: 0; border-radius: 22px; background: transparent; color: #e9e3ef; text-align: left; }
.hotspots-page .route-search-dropdown .route-search-item:hover,
.hotspots-page .route-search-dropdown .route-search-item:focus-visible { background: #262335; outline: none; box-shadow: inset 0 0 0 2px #a78bfa; }
.hotspots-page .route-search-dropdown .route-search-item:hover { box-shadow: none; }
.hotspots-page .route-search-dropdown .route-search-item__icon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #262335; color: #a78bfa; font-size: 1rem; }
.hotspots-page .route-search-dropdown .route-search-item:hover .route-search-item__icon { background: #1a1825; }
.hotspots-page .route-search-dropdown .route-search-item__content { display: flex; flex: 1; flex-direction: column; gap: 0; min-width: 0; }
.hotspots-page .route-search-dropdown .route-search-item__title { overflow: hidden; color: #e9e3ef; font-size: 1rem; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.hotspots-page .route-search-dropdown .route-search-item__sub { margin: 0; overflow: hidden; color: #a9a1b3; font-size: .8125rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.hotspots-page .route-search-item__distance { flex: none; color: #a9a1b3; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.hotspots-page mark.route-search-hl { padding: 0; background: none; color: #c4b5fd; }
.hotspots-page .route-search-state { margin: 8px; color: #a9a1b3; font-size: .875rem; line-height: 1.45; }
.hotspots-page .route-search-state--error { color: #ff8e9e; }

/* Cómo llegar: control segmentado en cápsula */
.hotspots-page .route-mode-section { margin: 0; }
.hotspots-page .route-mode-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.hotspots-page .route-modes { display: flex; gap: 4px; padding: 4px; border-radius: 26px; background: #262335; }
.hotspots-page .route-modes .route-mode-btn { display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px; height: 44px; min-height: 44px; border: 0; border-radius: 22px; background: transparent; color: #e9e3ef; font-size: .9375rem; font-weight: 600; }
.hotspots-page .route-modes .route-mode-btn i { margin: 0; }
.hotspots-page .route-modes .route-mode-btn:hover { background: #2e2a42; }
.hotspots-page .route-modes .route-mode-btn.is-active,
.hotspots-page .route-modes .route-mode-btn.is-active:hover { background: #7c3aed; color: #ffffff; }

/* Resumen */
.hotspots-page .route-summary { padding: 0 6px; }
.hotspots-page .route-summary[hidden] { display: none; }
.hotspots-page .route-summary__main { display: flex; align-items: baseline; gap: 10px; }
.hotspots-page .route-summary__time { color: #e9e3ef; font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hotspots-page .route-summary__distance { color: #a9a1b3; font-size: 1rem; font-variant-numeric: tabular-nums; }
.hotspots-page .route-summary__meta { margin-top: 2px; color: #a9a1b3; font-size: .875rem; line-height: 1.45; }

/* Contexto de seguridad sin puntaje */
.hotspots-page .route-safety-card { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px 16px; border: 0; border-radius: 24px; background: #262335; }
.hotspots-page .route-safety-main { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
.hotspots-page .route-safety-icon { width: 44px; height: 44px; border-radius: 50%; }
.hotspots-page .route-safety-score[hidden] { display: none; }
.hotspots-page .route-safety-meta { margin: 0; color: #a9a1b3; font-size: .875rem; }
.hotspots-page .route-safety-meta[hidden] { display: none; }
.hotspots-page .route-safety-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hotspots-page .route-safety-list[hidden] { display: none; }
.hotspots-page .route-safety-list li { display: flex; align-items: baseline; gap: 10px; color: #e9e3ef; font-size: .9375rem; line-height: 1.4; overflow-wrap: anywhere; }
.hotspots-page .route-safety-list__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.hotspots-page .route-safety-note { margin: 0; color: #a9a1b3; font-size: .8125rem; line-height: 1.45; }
.hotspots-page .route-safety-note[hidden] { display: none; }
.hotspots-page .route-safety-card .route-speed-readout { display: none; }

/* Mensaje de ruta lista: el resumen ya lo muestra; queda solo para lectores de pantalla */
.hotspots-page #routeAlert.route-alert--ok { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.hotspots-page .route-feedback-floating { margin: 0; }

/* Iniciar recorrido: cápsula de 52 px */
.hotspots-page .route-launch-actions { gap: 8px; margin: 0; padding: 0; border: 0; }
.hotspots-page .route-launch-actions .route-launch-btn { height: 52px; min-height: 52px; border-radius: 26px; background: #7c3aed; color: #ffffff; font-size: 1rem; font-weight: 600; }
.hotspots-page .route-launch-actions .route-launch-btn:hover { background: #6d28d9; }
.hotspots-page .route-launch-meta { margin: 0; color: #a9a1b3; font-size: .8125rem; line-height: 1.45; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .hotspots-page .route-location-row { transition: none; }
}

/* Móvil: hoja de 28 px con manija */
@media (max-width: 860px) {
  .hotspots-page .route-card { position: relative; }
  .hotspots-page .route-card::before { content: ""; position: absolute; top: 9px; left: 50%; z-index: 1; width: 36px; height: 5px; border-radius: 3px; background: #3a3550; transform: translateX(-50%); }
  .hotspots-page .route-content-inner { padding: 22px 12px 28px; }
}

/* Escritorio (RutaEscritorio): tarjeta flotante de 420 px y 28 px; abierta ocupa de 146 px hasta abajo */
@media (min-width: 861px) {
  .hotspots-page .route-shell { width: 420px; max-width: calc(100% - 36px); }
  .hotspots-page .route-shell:has(.route-card.is-open) { top: 146px; bottom: 18px; }
  .hotspots-page .route-shell:has(.route-card.is-open) .route-card { display: flex; flex-direction: column; height: 100%; }
  .hotspots-page .route-card.is-open .route-launcher { display: none; }
  .hotspots-page .route-card.is-open .route-content { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
  .hotspots-page .route-content-inner { gap: 14px; padding: 20px 16px 16px; }
  .hotspots-page:has(.route-card.is-open) .leaflet-top.leaflet-left { left: 454px; }
}

/* Tipos de ruta a pie (ACTUALIZACIÓN 4: RutaLista / RutaEscritorioOpciones) */
.hotspots-page .route-privacy-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 0 6px; color: #a9a1b3; font-size: .8125rem; line-height: 1.45; }
.hotspots-page .route-privacy-note i { margin-top: 3px; color: #a78bfa; }
.hotspots-page .route-options { display: flex; flex-direction: column; gap: 8px; }
.hotspots-page .route-options[hidden] { display: none; }
.hotspots-page .route-options__title { margin: 0; padding: 0 6px; color: #e9e3ef; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.hotspots-page .route-options__list { display: flex; flex-direction: column; gap: 8px; }
.hotspots-page .route-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 22px; background: #262335; color: #e9e3ef; text-align: left; }
.hotspots-page .route-option:hover { background: #2e2a42; }
.hotspots-page .route-option[aria-checked="true"] { padding: 11px 13px; border: 2px solid #8b5cf6; background: rgba(139, 92, 246, .12); }
.hotspots-page .route-option:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.hotspots-page .route-option__radio { display: grid; flex: none; place-items: center; box-sizing: border-box; width: 22px; height: 22px; border: 2px solid #766b82; border-radius: 50%; }
.hotspots-page .route-option[aria-checked="true"] .route-option__radio { border-color: #8b5cf6; }
.hotspots-page .route-option[aria-checked="true"] .route-option__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #8b5cf6; }
.hotspots-page .route-option__body { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.hotspots-page .route-option__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hotspots-page .route-option__name { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.hotspots-page .route-option__tag { height: 22px; padding: 0 8px; border-radius: 11px; background: rgba(139, 92, 246, .18); color: #c4b5fd; font-size: .8125rem; font-weight: 600; line-height: 22px; }
.hotspots-page .route-option__meta { color: #a9a1b3; font-size: .875rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.hotspots-page .route-option__count { flex: none; max-width: 76px; color: #a9a1b3; font-size: .8125rem; line-height: 1.3; text-align: right; }
.hotspots-page .route-option__count strong { display: block; color: #e9e3ef; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hotspots-page .route-option__street { color: #a9a1b3; font-size: .8125rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.hotspots-page .route-option__same { color: #c4b5fd; font-size: .8125rem; line-height: 1.4; }
/* Más segura sin ruta dentro del tope: apagada, con su motivo, no seleccionable. */
.hotspots-page .route-option--off { background: #1a1825; cursor: default; }
.hotspots-page .route-option--off:hover { background: #1a1825; }
.hotspots-page .route-option--off .route-option__name { color: #a9a1b3; }
.hotspots-page .route-option--off .route-option__radio { border-color: #4a4262; }
.hotspots-page .route-options__note { margin: 0; padding: 0 6px; color: #a9a1b3; font-size: .8125rem; line-height: 1.45; }

/* Móvil, tipos de ruta: la hoja deja ver el mapa con las rutas arriba (como RutaLista) */
@media (max-width: 860px) {
  .hotspots-page .route-card.is-open .route-content { max-height: max(300px, calc(100dvh - 370px)); }
  .hotspots-page .route-option { padding: 10px 12px; }
  .hotspots-page .route-option[aria-checked="true"] { padding: 9px 11px; }
  .hotspots-page .route-option__count { max-width: 64px; }
}

/* Estado compacto del planeador (teléfonos): con una ruta calculada solo quedan la barra del destino y "Editar recorrido". */
.hotspots-page .route-compact-header { display: none; align-items: center; justify-content: space-between; gap: 12px; }
.hotspots-page .route-compact-header[hidden] { display: none; }
.hotspots-page .route-compact-header h2 { margin: 0; font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
.hotspots-page .route-compact-header p { margin: 2px 0 0; color: #a9a1b3; font-size: .875rem; line-height: 1.45; }
.hotspots-page .route-edit-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #262335; color: #e9e3ef; cursor: pointer; }
.hotspots-page .route-edit-btn:hover { background: #2f2b42; }
.hotspots-page .route-edit-btn:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
@media (max-width: 860px) {
  .hotspots-page .route-card.is-compact .route-compact-header { display: flex; }
  .hotspots-page .route-card.is-compact .route-panel-header,
  .hotspots-page .route-card.is-compact .route-locations-card,
  .hotspots-page .route-card.is-compact .route-search-results,
  .hotspots-page .route-card.is-compact .route-privacy-note,
  .hotspots-page .route-card.is-compact .route-mode-section,
  .hotspots-page .route-card.is-compact .route-summary__meta,
  .hotspots-page .route-card.is-compact .route-options__title { display: none; }
}
@media (min-width: 861px) {
  .hotspots-page .route-compact-header { display: none !important; }
}