/* Mapa por parroquias: fondo azul noche, texto blanco, naranja y azul claro solo como acento */
:root {
    --ink: #061b31;
    --fondo: #0b2540;
    --navy: #09243e;
    --blue: #123b60;
    --linea: #1e4a72;
    --blanco: #fff;
    --suave: #c6d6e4;
    --muted: #a9bed0;
    --orange: #ff7144;
    --cielo: #5fb4ff;
    --turquesa: #4fd1c5;
    --ambar: #ffc15e;
    --oro: #ffd166;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; }

body {
    background: var(--fondo);
    color: var(--blanco);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
}

a { color: var(--cielo); }
button { font: inherit; }

/* Cabecera como la de la portada: banda oscura a todo el ancho, logo grande y los filtros principales */
.pm-top {
    position: sticky;
    top: 0;
    z-index: 1000;
    margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    background: rgba(6, 27, 49, .97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}

.pm-top-dentro {
    max-width: 1280px;
    min-height: 58px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

.pm-marca {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    color: var(--blanco);
    font-size: 1.65rem;
    font-weight: 850;
    letter-spacing: -.06em;
    text-decoration: none;
}

.pm-marca img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
    transform: translateY(5px);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35));
    transition: transform .2s ease;
}

.pm-marca:hover img { transform: translateY(5px) scale(1.05); }
.pm-acento { color: #ff8059; }

.pm-top .pm-tipos { flex: 1; min-width: 0; }

.pm-volver {
    flex: none;
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.pm-volver:hover { color: var(--blanco); }

.pm-cabecera {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
    padding-block: 22px 14px;
}

.pm-eyebrow {
    margin: 0 0 4px;
    color: var(--orange);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pm-cabecera h1 {
    margin: 0;
    font-size: clamp(28px, 5vw, 44px);
    line-height: 1.1;
    letter-spacing: -.02em;
}

.pm-contador {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pm-contador strong {
    font-size: 48px;
    line-height: 1;
    color: var(--orange);
    font-variant-numeric: tabular-nums;
}

.pm-contador span { display: block; font-weight: 600; }
.pm-contador small { display: block; color: var(--muted); font-size: 13px; }

.pm-filtros {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    padding-block: 4px 14px;
}

.pm-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pm-fila:empty { display: none; }

/* En escritorio los filtros extra van en línea; en móvil son una hoja que sube desde abajo */
.pm-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.pm-grupo { display: flex; align-items: center; gap: 8px; }
.pm-etiqueta { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.pm-top .pm-abrir-filtros, .pm-extra-cabecera, .pm-ver { display: none; }
.pm-velo { position: fixed; inset: 0; background: rgba(2, 10, 20, .6); z-index: 1100; }

.pm-badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--orange);
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
}

.pm-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--linea);
    background: transparent;
    color: var(--suave);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.pm-chip:hover { border-color: var(--cielo); color: var(--blanco); }
.pm-chip[aria-pressed="true"] { background: var(--blue); border-color: var(--cielo); color: var(--blanco); }
.pm-chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.pm-chip[aria-pressed="false"] .pm-forma { opacity: .35; }
.pm-mini { min-height: 32px; padding: 4px 12px; font-size: 14px; }
.pm-interruptor[aria-pressed="true"] { border-color: var(--orange); }
.pm-chip .pm-num { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.pm-separador { width: 1px; height: 24px; background: var(--linea); margin-inline: 4px; }

/* Formas por tipo: se distinguen también sin ver bien los colores */
.pm-forma { display: inline-block; width: 11px; height: 11px; flex: none; }
.pm-evento { background: var(--orange); border-radius: 50%; }
.pm-restaurante { background: var(--cielo); border-radius: 3px; }
.pm-local { background: var(--turquesa); transform: rotate(45deg) scale(.9); }
.pm-espacio { background: var(--ambar); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.pm-cuerpo {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
    gap: 16px;
    padding-bottom: 24px;
}

.pm-mapa-caja {
    position: relative;
    /* Contexto propio: los controles de Leaflet (z-index 1000) quedan por debajo de la cabecera fija */
    isolation: isolate;
    z-index: 0;
    min-height: 560px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--linea);
    background: #0f3152;
}

#pm-mapa { position: absolute; inset: 0; background: #0f3152; }

/* Teselas de OpenStreetMap en modo oscuro, a juego con la web */
#pm-mapa .leaflet-tile-pane { filter: invert(1) hue-rotate(185deg) brightness(.82) contrast(.92) saturate(.55); }

.pm-lado {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    max-height: 560px;
}

.pm-promo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px dashed var(--orange);
    background: rgba(255, 113, 68, .07);
    color: var(--blanco);
    text-decoration: none;
}

.pm-promo small { color: var(--orange); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pm-promo span { color: var(--suave); font-size: 13px; }
.pm-promo:hover { background: rgba(255, 113, 68, .13); }

.pm-publicar { display: block; margin-top: 10px; color: var(--suave); font-size: 13px; text-decoration: none; }
.pm-publicar b { color: var(--cielo); font-weight: 600; }
.pm-publicar:hover b { text-decoration: underline; }

.pm-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    border-top: 1px solid var(--linea);
    scrollbar-color: var(--linea) transparent;
}

.pm-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 4px;
    border-bottom: 1px solid var(--linea);
    cursor: pointer;
}

.pm-item:hover, .pm-item.activo { background: rgba(95, 180, 255, .07); }

.pm-foto {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--blue);
}

.pm-texto { display: flex; flex-direction: column; min-width: 0; }

.pm-texto a {
    color: var(--blanco);
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-texto a:hover { text-decoration: underline; }

.pm-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pm-cerca-tag { color: var(--cielo); }
.pm-fecha { color: var(--orange); font-weight: 600; }

.pm-vacio { padding: 24px 8px; color: var(--suave); text-align: center; }

/* Marcadores */
.pm-marcador { background: none; border: 0; }

.pm-pin {
    position: relative;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 2px solid var(--ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
}

.pm-pin.evento { background: var(--orange); border-radius: 50%; }
.pm-pin.restaurante { background: var(--cielo); border-radius: 5px; }
.pm-pin.local { background: var(--turquesa); transform: rotate(45deg); width: 19px; height: 19px; }
.pm-pin.espacio { background: var(--ambar); clip-path: polygon(50% 0, 100% 100%, 0 100%); border: 0; box-shadow: none; }
.pm-pin.cerca { opacity: .75; }
.pm-pin.grupo { width: 28px; height: 28px; font-size: 12px; }

/* Destacados de pago: anillo dorado en el pin, borde en la lista y la etiqueta «Patrocinado» */
.pm-pin.patrocinado { outline: 3px solid var(--oro); outline-offset: 1px; box-shadow: 0 0 14px rgba(255, 209, 102, .75); }
.pm-pin.espacio.patrocinado { outline: 0; filter: drop-shadow(0 0 3px var(--oro)) drop-shadow(0 0 6px var(--oro)); }
.pm-pin.cerca.patrocinado { opacity: 1; }
.pm-item.patrocinado { box-shadow: inset 3px 0 0 var(--oro); background: rgba(255, 209, 102, .06); }
.pm-patro-tag {
    padding: 1px 6px;
    border: 1px solid var(--oro);
    border-radius: 4px;
    color: var(--oro);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--navy); color: var(--blanco); border: 1px solid var(--linea); }
.leaflet-popup-content { margin: 12px 14px; font-size: 14px; line-height: 1.4; }
.leaflet-popup-content ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.leaflet-popup-content a { color: var(--blanco); font-weight: 600; }
.leaflet-popup-content small { display: block; color: var(--muted); }
.leaflet-container a.leaflet-popup-close-button { color: var(--suave); }
.leaflet-container .leaflet-control-attribution { background: rgba(6, 27, 49, .8); color: var(--muted); }
.leaflet-container .leaflet-control-attribution a { color: var(--suave); }
.leaflet-bar a { background: var(--navy); color: var(--blanco); border-color: var(--linea); }

.pm-pie {
    max-width: 1280px;
    margin: 0 auto;
    padding-block: 16px 32px;
    border-top: 1px solid var(--linea);
    color: var(--muted);
    font-size: 13px;
}

/* Escritorio: la página no se desplaza; ocupa la pantalla y solo se mueve la lista lateral */
@media (min-width: 861px) and (min-height: 600px) {
    html, body { height: 100%; overflow: hidden; }
    body { display: flex; flex-direction: column; }
    .pm-top, .pm-cabecera, .pm-filtros { flex: none; }
    .pm-cabecera, .pm-filtros, .pm-cuerpo { width: 100%; }
    .pm-cuerpo { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); padding-bottom: 16px; }
    .pm-mapa-caja { min-height: 0; height: 100%; }
    .pm-lado { max-height: none; min-height: 0; }
    .pm-lista { flex: 1; min-height: 0; }
    .pm-pie { display: none; }
}

@media (max-width: 860px) {
    body { font-size: 14px; }
    .pm-top-dentro {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px 12px;
        padding-block: 6px 10px;
    }
    .pm-marca { font-size: 1.4rem; }
    .pm-marca img { width: 48px; height: 48px; transform: translateY(3px); }
    .pm-marca:hover img { transform: translateY(3px) scale(1.05); }
    .pm-volver { display: none; }
    .pm-top .pm-tipos { grid-column: 1 / -1; grid-row: 2; }
    .pm-cabecera { flex-wrap: nowrap; align-items: center; gap: 12px; padding-block: 14px 12px; }
    .pm-titulo { min-width: 0; }
    .pm-eyebrow { font-size: 10px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pm-cabecera h1 { font-size: 22px; }
    .pm-contador { flex-direction: column; align-items: flex-end; gap: 0; text-align: right; flex: none; }
    .pm-contador strong { font-size: 30px; }
    .pm-contador span { font-size: 12px; font-weight: 500; color: var(--suave); max-width: 8.5em; line-height: 1.3; }
    .pm-contador small { display: none; }

    .pm-filtros { padding: 0; }
    .pm-tipos {
        flex: 1;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
        mask-image: linear-gradient(90deg, #000 85%, transparent);
        padding-right: 24px;
    }
    .pm-tipos::-webkit-scrollbar { display: none; }
    .pm-chip { min-height: 34px; padding: 5px 12px; font-size: 14px; white-space: nowrap; flex: none; }
    .pm-top .pm-abrir-filtros { display: inline-flex; flex: none; border-color: var(--cielo); color: var(--blanco); }

    .pm-extra {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 18px;
        max-height: 82vh;
        overflow-y: auto;
        padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
        background: var(--navy);
        border-top: 1px solid var(--linea);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, .5);
        transform: translateY(105%);
        visibility: hidden;
        transition: transform .25s ease, visibility .25s;
    }
    .pm-extra.abierta { transform: none; visibility: visible; }
    .pm-extra-cabecera { display: flex; align-items: center; justify-content: space-between; font-size: 17px; }
    .pm-cerrar { background: none; border: 0; color: var(--suave); font-size: 28px; line-height: 1; padding: 0 4px; cursor: pointer; }
    .pm-grupo { flex-direction: column; align-items: flex-start; gap: 8px; }
    .pm-ver {
        display: block;
        min-height: 46px;
        border: 0;
        border-radius: 12px;
        background: var(--orange);
        color: var(--ink);
        font-weight: 700;
        font-size: 15px;
        cursor: pointer;
    }

    .pm-cuerpo { grid-template-columns: 1fr; gap: 12px; }
    .pm-mapa-caja { min-height: 0; height: 64vh; height: 64svh; border-radius: 14px; }
    .pm-lado { max-height: none; }
    .pm-lista { overflow: visible; }
    .pm-promo { padding: 10px 12px; }
    .pm-promo span { display: none; }
    .pm-item { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; padding: 8px 2px; }
    .pm-foto { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .pm-chip, .pm-extra { transition: none; }
}