/* ==========================================================================
   Localizador — full-viewport map view
   ========================================================================== */

.pf-redes-localizador {
    position: relative;
    padding: 0;
    margin: 0;
    /* Full-height minus header. The footer is rendered below the map; user
       scrolls past the map to reach it, matching the standard panel UX. */
    height: calc(100vh - 80px);
    min-height: 480px;
    overflow: hidden;
}

.pf-redes-localizador__map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #eef0f3;
}

/* Loading chip — TOP CENTER over the map. Larger + bouncing-dots loader so
   activity is unmistakable. */
.pf-redes-localizador__refreshing {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid #d0d3da;
    border-radius: 22px;
    font-size: 13.5px;
    font-weight: 600;
    color: #171723;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease-out;
}
.pf-redes-localizador__refreshing[data-state="loading"],
.pf-redes-localizador__refreshing[data-state="pending"] {
    opacity: 1;
}

/* 3-dot bouncing loader. Same animation for both pending and loading — the
   label text differentiates them. */
.pf-redes-localizador__loader {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.pf-redes-localizador__loader > span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #C91517;
    animation: pf-loc-bounce 1s infinite ease-in-out both;
}
.pf-redes-localizador__loader > span:nth-child(2) { animation-delay: 0.15s; }
.pf-redes-localizador__loader > span:nth-child(3) { animation-delay: 0.30s; }
@keyframes pf-loc-bounce {
    0%, 80%, 100% { transform: scale(0.45); opacity: 0.5; }
    40%           { transform: scale(1);    opacity: 1;   }
}

.pf-redes-localizador__error {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 500;
    max-width: 320px;
    padding: 10px 14px;
    background: #C91517;
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.35;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* --- Status pill (bottom-left): "N obras en esta zona" -------------------- */
.pf-redes-localizador__status {
    position: absolute;
    bottom: 18px;
    left: 14px;
    z-index: 500;
    max-width: 320px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #d0d3da;
    border-radius: 14px;
    font-size: 12.5px;
    color: #171723;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transition: opacity 0.25s ease-out;
    pointer-events: none;
}
.pf-redes-localizador__status[data-state="ok"],
.pf-redes-localizador__status[data-state="empty"],
.pf-redes-localizador__status[data-state="more"] {
    opacity: 1;
}
/* tema#143: la respuesta llegó al tope → «Hay más resultados: acerca el mapa». */
.pf-redes-localizador__status[data-state="more"] {
    border-color: #C91517;
}
.pf-redes-localizador__status[data-state="empty"] {
    color: #6c6f78;
    font-style: italic;
}

/* --- Custom map markers (Leaflet divIcon) --------------------------------- */
/* tema#79 (feedback 5, punto 31): marcador ÚNICO azul, sin icono de disciplina
   y sin leyenda. El color es el token de enlace del tema (--pf-redes-link,
   #1565c0). La paleta por disciplina sigue viva en los chips del popup
   (.pf-loc-popup__sector-chip), que el issue conserva expresamente. */
/* Reset Leaflet's default white box around divIcons. */
.pf-loc-marker-wrap {
    background: transparent !important;
    border: none !important;
}
.pf-loc-marker {
    width: 32px;
    height: 32px;
    margin: 6px;
    border-radius: 50% 50% 50% 0;
    background: var(--pf-redes-link, #1565c0);
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transform: rotate(-45deg);
    transition: transform 0.12s ease-out;
}
.pf-loc-marker:hover {
    transform: rotate(-45deg) scale(1.08);
    z-index: 1000;
}

/* --- Search-center pin (crosshair) ---------------------------------------- */
/* Marker that shows the coordinate the current results were fetched for. Sits
   below obra markers (zIndexOffset:-100 in JS) and non-interactive so clicks
   pass through to the radius circle / map. */
.pf-loc-center-pin-wrap {
    background: transparent !important;
    border: none !important;
}
.pf-loc-center-pin {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: 2px solid #C91517;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 5px rgba(201, 21, 23, 0.10);
}
.pf-loc-center-pin i {
    color: #C91517;
    font-size: 13px;
    line-height: 1;
}

/* --- Marker popup body ---------------------------------------------------- */
.pf-loc-popup {
    font-size: 13px;
    line-height: 1.4;
    color: #171723;
    min-width: 200px;
    max-width: 280px;
}
.pf-loc-popup__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.pf-loc-popup__title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #171723;
    line-height: 1.25;
}
/* Sector chip rendered before each obra title. Coloured background comes
   from inline style="background:#…" injected by sectorChipHtml(). */
.pf-loc-popup__sector-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    line-height: 1;
}
.pf-loc-popup__row {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin-top: 4px;
    color: #444;
}
.pf-loc-popup__row i {
    flex: 0 0 14px;
    margin-top: 2px;
    color: #C91517;
}
.pf-loc-popup__count {
    margin: 8px 0 4px;
    font-weight: 600;
    color: #171723;
}
.pf-loc-popup__list {
    margin: 0;
    padding: 0 0 0 16px;
    max-height: 260px;
    overflow-y: auto;
    list-style: disc;
}
.pf-loc-popup__list li {
    margin: 2px 0;
    color: #2a2a2a;
}
.pf-loc-popup__list strong {
    color: #171723;
}
.pf-loc-popup__date {
    color: #6c6f78;
    font-size: 12px;
    margin-left: 4px;
}

/* --- Interactive popup buttons ------------------------------------------- */
/* Single popup "Más información" CTA */
.pf-loc-popup__detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 12px;
    background: #C91517;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.12s ease-out;
}
.pf-loc-popup__detail-btn:hover,
.pf-loc-popup__detail-btn:focus {
    background: #B90507;
}

/* Group popup — each <li> wraps a clickable button. Layout is a single row:
       [sector chip]  Title (flex, ellipsizes if long)        Date (right) */
.pf-loc-popup__list { list-style: none; padding: 0; margin: 0; }
.pf-loc-popup__list li { margin: 2px 0; }
.pf-loc-popup__item-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 6px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    color: #2a2a2a;
    font-size: 13px;
    line-height: 1.3;
    transition: background-color 0.12s ease-out, border-color 0.12s ease-out;
}
.pf-loc-popup__item-btn:hover,
.pf-loc-popup__item-btn:focus {
    background: #f7f7ff;
    border-color: #e0e0eb;
    color: #C91517;
}
.pf-loc-popup__item-btn .pf-loc-popup__sector-chip {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    font-size: 10px;
}
.pf-loc-popup__item-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: #171723;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pf-loc-popup__item-btn:hover .pf-loc-popup__item-title,
.pf-loc-popup__item-btn:focus .pf-loc-popup__item-title {
    color: #C91517;
}
.pf-loc-popup__item-date {
    flex: 0 0 auto;
    color: #6c6f78;
    font-size: 12px;
    white-space: nowrap;
}

/* tema#143 — cada obra del espacio: título (abre el modal) y, debajo, sus
   fechas, la sala si el marcador junta varias y «Más información». */
.pf-loc-popup__list li.pf-loc-popup__item {
    margin: 0;
    padding: 4px 0;
    border-bottom: 1px solid #eeeef3;
}
.pf-loc-popup__list li.pf-loc-popup__item:last-child {
    border-bottom: 0;
}
.pf-loc-popup__item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 0 8px 2px 36px;
    font-size: 12px;
    color: #6c6f78;
}
.pf-loc-popup__item-venue {
    white-space: nowrap;
}
.pf-loc-popup__item-meta i {
    color: #C91517;
}
.pf-loc-popup__item-info {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 2px 8px;
    background: transparent;
    border: 1px solid #C91517;
    border-radius: 4px;
    color: #C91517;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}
.pf-loc-popup__item-info i {
    color: inherit;
}
.pf-loc-popup__item-info:hover,
.pf-loc-popup__item-info:focus {
    background: #C91517;
    color: #fff;
}
.pf-loc-popup__ongoing {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 8px;
    background: #fdecec;
    color: #C91517;
    font-size: 11px;
    font-weight: 600;
}

/* --- Filter controls (top-right) ----------------------------------------- */
.pf-redes-localizador__controls {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 600;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.pf-redes-localizador__filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fff;
    color: #171723;
    border: 1px solid #d0d3da;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
    transition: background-color 0.12s ease-out;
}
.pf-redes-localizador__filter-btn:hover,
.pf-redes-localizador__filter-btn:focus {
    background: #f7f7ff;
}
.pf-redes-localizador__filter-btn i { color: #C91517; }
/* Guarda de `hidden` (tema#125): el JS enciende y apaga este elemento con el
   atributo `hidden`, y el `[hidden] { display: none }` del navegador pierde
   contra la regla de autor de aquí abajo. Sin esto, sale un punto rojo vacio junto a «Filtros» con 0 filtros activos. */
.pf-redes-localizador__filter-badge[hidden] {
    display: none;
}

.pf-redes-localizador__filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #C91517;
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.pf-redes-localizador__filter-panel {
    width: 260px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #d0d3da;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.pf-redes-localizador__filter-group {
    margin: 0 0 12px;
    padding: 0;
    border: none;
}
.pf-redes-localizador__filter-group legend {
    padding: 0;
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #171723;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pf-redes-localizador__filter-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    color: #2a2a2a;
    cursor: pointer;
}
.pf-redes-localizador__filter-group input[type="radio"],
.pf-redes-localizador__filter-group input[type="checkbox"] {
    accent-color: #C91517;
}
/* Guarda de `hidden` (tema#125): el JS enciende y apaga este elemento con el
   atributo `hidden`, y el `[hidden] { display: none }` del navegador pierde
   contra la regla de autor de aquí abajo. Sin esto, el rango de fechas personalizado nace desplegado sin haber marcado «Personalizado». */
.pf-redes-localizador__date-custom[hidden] {
    display: none;
}

.pf-redes-localizador__date-custom {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e0e0eb;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pf-redes-localizador__date-custom label {
    flex-direction: row;
    justify-content: space-between;
    font-size: 12.5px;
}
.pf-redes-localizador__date-custom input[type="date"] {
    padding: 4px 6px;
    font-size: 12.5px;
    border: 1px solid #d0d3da;
    border-radius: 4px;
}
.pf-redes-localizador__filter-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e0e0eb;
}
.pf-redes-localizador__filter-clear,
.pf-redes-localizador__filter-apply {
    flex: 1;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.12s ease-out;
}
.pf-redes-localizador__filter-clear {
    background: #fff;
    color: #171723;
    border-color: #d0d3da;
}
.pf-redes-localizador__filter-clear:hover { background: #f7f7ff; }
.pf-redes-localizador__filter-apply {
    background: #C91517;
    color: #fff;
}
.pf-redes-localizador__filter-apply:hover { background: #B90507; }

/* Override default Leaflet popup chrome to fit RED-ES style. */
.leaflet-popup-content-wrapper {
    border-radius: 6px;
}
.leaflet-popup-content {
    margin: 12px 14px;
}

@media (max-width: 650px) {
    .pf-redes-localizador {
        height: calc(100vh - 60px);
    }
    .pf-redes-localizador__refreshing {
        font-size: 12px;
        padding: 6px 10px;
    }
    .pf-redes-localizador__status {
        font-size: 12px;
        padding: 6px 10px;
        max-width: calc(100vw - 80px);
    }
    .pf-redes-localizador__filter-panel {
        width: calc(100vw - 40px);
        max-width: 320px;
    }
}