/* Leyenda del mapa de Explorar (ACTUALIZACIÓN 7): hoja inferior en teléfono (hasta 767 px, sobre el menú inferior) y tarjeta flotante en escritorio.
   Superficie sólida con borde (sin desenfoque), como los demás paneles del mapa. El interruptor "Todos / Con un filtro" solo cambia los pines de ejemplo. */
.hotspots-page #hotspotsLegend {
    --legend-card: #1a1825;
    --legend-row: #211d30;
    position: absolute;
    top: 150px;
    right: 18px;
    z-index: 505;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 400px;
    max-height: calc(100% - 174px);
    overflow: hidden;
    border: 1px solid var(--ui-divider);
    border-radius: var(--ui-radius-sheet);
    background: var(--legend-card);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-dialog);
    animation: legend-in 0.2s ease-out;
}

.hotspots-page #hotspotsLegend.is-hidden,
.hotspots-page .legend-scrim.is-hidden {
    display: none;
}

.hotspots-page #hotspotsLegend:focus {
    outline: none;
}

.hotspots-page .legend-scrim {
    display: none;
}

.hotspots-page .legend-grabber {
    display: none;
    flex: none;
    align-self: center;
    width: 40px;
    height: 5px;
    margin: 8px 0 4px;
    border-radius: 3px;
    background: #4a4262;
}

.hotspots-page .legend-header {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 8px 4px 24px;
}

.hotspots-page .legend-header h2 {
    margin: 0;
    font-size: 1.375rem;
    line-height: 1.25;
    font-weight: 700;
}

.hotspots-page .legend-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ui-raised);
    color: var(--ui-text);
    cursor: pointer;
    transition: background-color var(--ui-feedback);
}

.hotspots-page .legend-close:hover {
    background: #332c45;
}

.hotspots-page .legend-close:focus-visible,
.hotspots-page .legend-mode:focus-visible,
.hotspots-page .legend-panel:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
}

.hotspots-page .legend-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    padding: 4px 24px 20px;
    overflow: auto;
}

.hotspots-page .legend-modes {
    display: flex;
    flex: none;
    gap: 4px;
    box-sizing: border-box;
    height: 52px;
    padding: 4px;
    border-radius: 26px;
    background: var(--ui-raised);
}

.hotspots-page .legend-mode {
    flex: 1;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: #a9a1b3;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--ui-feedback), color var(--ui-feedback);
}

.hotspots-page .legend-mode.is-active {
    background: var(--ui-action);
    color: var(--ui-on-action);
}

.hotspots-page .legend-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hotspots-page .legend-note {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: #c9c1d4;
}

.hotspots-page .legend-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hotspots-page .legend-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    box-sizing: border-box;
    padding: 6px 14px;
    border-radius: var(--ui-radius-card);
    background: var(--legend-row);
    color: var(--ui-text);
    font-size: 0.9375rem;
}

.hotspots-page .legend-row__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.hotspots-page .legend-row__text strong {
    font-weight: 600;
    line-height: 1.35;
}

.hotspots-page .legend-row__text small {
    font-size: var(--ui-text-meta);
    line-height: 1.4;
    color: var(--ui-muted);
}

/* Pines de ejemplo: la misma gota que usa el mapa (.hotspot-pin) con el color de cada categoría */
.hotspots-page .legend-dot {
    flex: none;
}

.hotspots-page .legend-lighting { --pin: #f7bd56; }
.hotspots-page .legend-sidewalk { --pin: #8eb9ff; }
.hotspots-page .legend-unsafe { --pin: #ff8e9e; }
.hotspots-page .legend-baldios { --pin: #5bdeb1; }
.hotspots-page .legend-tie { --pin: #8b5cf6; }

/* Modo del ejemplo: "Todos" muestra el número, "Con un filtro" el ícono de la categoría */
.hotspots-page #hotspotsLegend[data-mode="todos"] .legend-when-filter,
.hotspots-page #hotspotsLegend[data-mode="filtro"] .legend-when-all {
    display: none;
}

@keyframes legend-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Con el panel de reportes abierto en escritorio, la leyenda se corre a su izquierda */
@media (min-width: 861px) {
    .hotspots-page:has(.hotspots-reports-panel:not(.is-hidden)) #hotspotsLegend {
        right: 408px;
    }
}

/* Entre 768 y 860 px el mapa usa la columna de herramientas a la derecha: la tarjeta se coloca a su izquierda */
@media (min-width: 768px) and (max-width: 860px) {
    .hotspots-page #hotspotsLegend {
        top: calc(124px + env(safe-area-inset-top, 0px));
        right: 76px;
        width: min(400px, calc(100% - 108px));
        max-height: calc(100% - 148px);
    }
}

@media (max-width: 767px) {
    .hotspots-page .legend-scrim {
        position: fixed;
        inset: 0;
        z-index: 1790;
        display: block;
        background: rgba(8, 6, 14, 0.45);
    }

    .hotspots-page #hotspotsLegend {
        position: fixed;
        top: auto;
        right: 0;
        bottom: calc(var(--bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px));
        left: 0;
        z-index: 1800;
        width: auto;
        max-height: min(720px, calc(100dvh - var(--bottom-nav-height, 64px) - env(safe-area-inset-bottom, 0px) - 72px));
        border: 0;
        border-radius: var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0;
        box-shadow: var(--ui-shadow-sheet);
    }

    .hotspots-page #hotspotsLegend {
        animation-name: legend-in;
    }

    .hotspots-page .legend-grabber {
        display: block;
    }

    .hotspots-page .legend-header {
        padding: 6px 8px 4px 20px;
    }

    .hotspots-page .legend-body {
        padding: 4px 20px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hotspots-page #hotspotsLegend {
        animation: none;
    }

    .hotspots-page .legend-mode,
    .hotspots-page .legend-close {
        transition: none;
    }
}