/* ==========================================================================
   Localizador de Puntos — estilos del front
   Para cambiar el color de marca, edita --lp-acento.
   ========================================================================== */
.lp-localizador {
    --lp-acento: #4a8b2c;       /* verde tipo Finca; cámbialo a tu marca */
    --lp-acento-osc: #3a6e22;
    --lp-borde: #e2e2e2;
    --lp-texto: #333;
    --lp-gris: #f6f6f6;
    color: var(--lp-texto);
    font-family: inherit;
}

.lp-titulo {
    font-size: 1.6rem;
    margin: 0 0 1rem;
}

/* ---- Filtros ---- */
.lp-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.lp-campo {
    display: flex;
    flex-direction: column;
    flex: 1 1 220px;
    min-width: 180px;
}
.lp-campo label {
    font-weight: 600;
    margin-bottom: .35rem;
    font-size: .9rem;
}
.lp-req { color: #d33; }
.lp-campo select {
    padding: .6rem .7rem;
    border: 1px solid var(--lp-borde);
    border-radius: 6px;
    background: #fff;
    font-size: .95rem;
    width: 100%;
}
.lp-campo-btn {
    flex: 0 0 auto;
    min-width: auto;
}
.lp-buscar {
    background: var(--lp-acento);
    color: #fff;
    border: 0;
    padding: .7rem 1.6rem;
    border-radius: 6px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.lp-buscar:hover { background: var(--lp-acento-osc); }

/* ---- Contenido (lista + mapa) ---- */
.lp-contenido {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.lp-sidebar {
    flex: 0 0 28%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lp-borde);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.lp-mapa-wrap {
    flex: 1 1 auto;
    min-width: 0;
}
.lp-mapa {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--lp-borde);
    z-index: 0; /* evita que el mapa tape menús del tema */
}

/* ---- Lista de ciudades / grupos ---- */
.lp-grupos { overflow-y: auto; }
.lp-item {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--lp-borde);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background .12s ease;
}
.lp-item:hover { background: var(--lp-gris); }
.lp-item .lp-nombre-ciudad { font-weight: 600; }
.lp-item .lp-conteo {
    font-size: .8rem;
    color: #888;
    margin-left: .5rem;
}
.lp-item .lp-flecha {
    color: var(--lp-acento);
    font-weight: 700;
    margin-left: .5rem;
}
.lp-vacio {
    padding: 1.5rem 1rem;
    color: #888;
    text-align: center;
    font-size: .9rem;
}

/* ---- Paginación ---- */
.lp-paginacion {
    display: flex;
    justify-content: center;
    gap: .25rem;
    padding: .6rem;
    border-top: 1px solid var(--lp-borde);
    flex-wrap: wrap;
}
.lp-paginacion:empty { display: none; }
.lp-paginacion button {
    border: 1px solid var(--lp-borde);
    background: #fff;
    color: var(--lp-texto);
    padding: .3rem .6rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: .85rem;
}
.lp-paginacion button:hover:not(:disabled) { background: var(--lp-gris); }
.lp-paginacion button.activo {
    background: var(--lp-acento);
    color: #fff;
    border-color: var(--lp-acento);
}
.lp-paginacion button:disabled { opacity: .4; cursor: default; }

/* ---- Detalle (puntos de una ciudad) ---- */
.lp-detalle { overflow-y: auto; }
.lp-detalle-titulo {
    padding: .85rem 1rem;
    margin: 0;
    font-size: 1rem;
    background: var(--lp-gris);
    border-bottom: 1px solid var(--lp-borde);
}
.lp-punto {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--lp-borde);
    cursor: pointer;
}
.lp-punto:hover { background: var(--lp-gris); }
.lp-punto h4 { margin: 0 0 .25rem; font-size: .95rem; }
.lp-punto .lp-tipo {
    display: inline-block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: var(--lp-acento);
    color: #fff;
    padding: .1rem .45rem;
    border-radius: 3px;
    margin-bottom: .35rem;
}
.lp-punto p { margin: .15rem 0; font-size: .85rem; color: #555; }
.lp-volver {
    display: block;
    width: 100%;
    text-align: left;
    padding: .8rem 1rem;
    background: #fff;
    border: 0;
    border-top: 1px solid var(--lp-borde);
    color: var(--lp-acento);
    font-weight: 600;
    cursor: pointer;
}
.lp-volver:hover { background: var(--lp-gris); }

/* ---- Popup del mapa ---- */
.lp-popup h4 { margin: 0 0 .35rem; font-size: .95rem; }
.lp-popup .lp-tipo {
    display: inline-block;
    font-size: .68rem;
    text-transform: uppercase;
    background: var(--lp-acento);
    color: #fff;
    padding: .1rem .4rem;
    border-radius: 3px;
    margin-bottom: .3rem;
}
.lp-popup p { margin: .1rem 0; font-size: .82rem; }

/* ---- Responsive ---- */
@media (max-width: 820px) {
    .lp-contenido { flex-direction: column; }
    .lp-sidebar {
        flex: 1 1 auto;
        max-width: none;
        max-height: 320px;
    }
    .lp-mapa { height: 380px !important; }
}