#filtros-personas {
        position: absolute;
        top: 5rem;
        left: 55px;
        z-index: 1100;
        background: white;
        padding: 10px 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
        font-size: 13px;

        display: flex;
        flex-direction: column;
        gap: 6px;

        width: 280px; /* ✅ evita que se expanda */
        max-height: 82vh; /* ✅ nunca se sale de la pantalla */
        overflow-y: auto; /* ✅ si crece, scroll */
      }

      /* Cuando el panel está deshabilitado */
      #filtros-personas.disabled-panel label,
      #filtros-personas.disabled-panel hr,
      #filtros-personas.disabled-panel .filtros-prioridad,
      #filtros-personas.disabled-panel strong {
        opacity: 0.55;
      }

      /* Inputs desactivados */
      #filtros-personas.disabled-panel input,
      #filtros-personas.disabled-panel select {
        pointer-events: none;
      }

      /* ✅ botones siempre normales */
      #filtros-personas.disabled-panel button {
        opacity: 1 !important;
        pointer-events: auto !important;
      }
      #btn-heatmap-wrap {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      #filtros-heatmap {
        background: #f8f9fa; /* ✅ se nota como sub-panel */
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        padding: 8px;
      }

      #filtros-heatmap strong {
        display: block;
        margin-bottom: 6px;
      }

      /* ✅ labels del heatmap mejor formateados */
      #filtros-heatmap label {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      /* Botones full width */
      #btn-heatmap,
      #btn-puntos {
        width: 100%;
      }

      /* Separadores */
      #filtros-personas hr {
        margin: 6px 0;
      }

      /* PRIORIDAD */
      .filtros-prioridad-row label {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
      }

      #btn-heatmap {
        opacity: 1 !important;
        filter: none !important;
        pointer-events: auto !important;
      }

        .dot-critica {
        background: #6f42c1;
      }
      .dot-alta {
        background: #dc3545;
      }
      .dot-media {
        background: #ffc107;
      }
      .dot-baja {
        background: #198754;
      }

       .dot-alimentos {
        background: #0d6efd;
      } /* azul */
      .dot-proyectos {
        background: #6f42c1;
      } /* morado */
      .dot-empleo {
        background: #fd7e14;
      } /* naranja */

      .filtro-item {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 4px 0;
      }

      .prio-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 1px solid rgba(0, 0, 0, 0.25);
        display: inline-block;
      }

      /* prioridad (igual al mapa) */
      .dot-critica {
        background: #6f42c1;
      } /* morado */
      .dot-alta {
        background: #dc3545;
      } /* rojo */
      .dot-media {
        background: #ffc107;
      } /* amarillo */
      .dot-baja {
        background: #198754;
      } /* verde */

      .cat-icon {
        width: 18px;
        display: inline-flex;
        justify-content: center;
      }

      .prio-icon {
        width: 18px;
        display: inline-flex;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
      }

      .prio-critica {
        color: #6f42c1;
      } /* morado */
      .prio-alta {
        color: #dc3545;
      } /* rojo */
      .prio-media {
        color: #ffc107;
      } /* amarillo */
      .prio-baja {
        color: #198754;
      } /* verde */

      .prio-icon {
        width: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
      }

      .prio-alta {
        color: #dc3545;
      } /* rojo */
      .prio-media {
        color: #ffc107;
      } /* amarillo */
      .prio-baja {
        color: #198754;
      } /* verde */

      #top-criticas a.top-colonia {
        text-decoration: none;
        font-weight: 600;
      }
      #top-criticas a.top-colonia:hover {
        text-decoration: underline;
      }

      /* panel filtros (mapa) */
        #filtros-personas {
        z-index: 2000 !important;
        }

        /* botón filtros mobile arriba del panel también */
        #btn-filtros-mobile {
        z-index: 3100 !important;
        }

        /* en mobile: el panel baja debajo del navbar */
        @media (max-width: 768px) {
        #filtros-personas {
            top: 70px !important; /* ya lo tienes, lo reforzamos */
            max-height: calc(100vh - 85px) !important;
            overflow-y: auto !important;
        }
    }