.exp-map-* del resto del sitio, repetido acá con su propio prefijo "mapa-" porque esta página es independiente, mismo criterio que el resto del sitio — ver el comentario junto a LUG_TIPO_COLOR en lugares.js). */ .mapa-page-container { padding: 28px 0 60px; } .mapa-filter-bar { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 18px 20px; margin-bottom: 22px; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05); } .mapa-dept-filter-label { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 14px; } .mapa-dept-filter-label i { color: var(--secondary-color); font-size: 0.82rem; } .mapa-dept-filter { display: flex; flex-wrap: wrap; gap: 9px; } .mapa-dept-pill-todos { background: var(--bg-light); border: 1.5px solid var(--accent-color); color: var(--accent-color); font-weight: 700; } .mapa-dept-pill-todos:hover, .mapa-dept-pill-todos:focus-visible { background: var(--accent-color); border-color: var(--accent-color); color: #ffffff; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15); } .mapa-dept-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--card-bg); border: 1.5px solid var(--border-color); color: var(--text-dark); font-weight: 600; font-size: 0.84rem; padding: 9px 16px; border-radius: 999px; cursor: pointer; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); transition: var(--transition); } .mapa-dept-pill-icon { color: var(--text-muted); font-size: 0.78rem; } .mapa-dept-pill:hover, .mapa-dept-pill:focus-visible { border-color: var(--secondary-color); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12); } .mapa-dept-pill.active { background: var(--secondary-color); border-color: var(--secondary-color); color: #ffffff; box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3); } .mapa-dept-pill.active:hover, .mapa-dept-pill.active:focus-visible { box-shadow: 0 6px 16px rgba(2, 132, 199, 0.4); } .mapa-dept-pill.active .mapa-dept-pill-icon { display: none; } .mapa-dept-pill-n { background: rgba(15, 23, 42, 0.12); color: inherit; font-size: 0.72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; } .mapa-dept-pill.active .mapa-dept-pill-n { background: rgba(255, 255, 255, 0.25); } .mapa-dept-pill-check { display: none; font-size: 0.72rem; } .mapa-dept-pill.active .mapa-dept-pill-check { display: inline-flex; } .mapa-map-wrap { position: relative; width: 100%; height: 70vh; min-height: 420px; max-height: 720px; border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12); } .mapa-map-container { width: 100%; height: 100%; } #mapaMapContainer .leaflet-top, #mapaMapContainer .leaflet-bottom { z-index: 800; } .mapa-map-legend { position: absolute; top: 14px; right: 14px; z-index: 800; background: var(--card-bg); border-radius: 12px; padding: 14px 16px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2); min-width: 190px; max-width: 230px; max-height: calc(100% - 28px); overflow-y: auto; } .mapa-map-legend-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-dark); margin-bottom: 10px; } .mapa-map-legend-item { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; color: var(--text-dark); padding: 6px 0; cursor: pointer; user-select: none; } .mapa-map-legend-item input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--secondary-color); cursor: pointer; flex-shrink: 0; } .mapa-map-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .mapa-map-pin-dot { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); color: #ffffff; border: 2px solid #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } .mapa-map-pin-dot i { transform: rotate(45deg); font-size: 0.78rem; } .mapa-map-popup img { width: 100%; height: 110px; object-fit: cover; display: block; } .mapa-map-popup-noimg { width: 100%; height: 110px; background: var(--bg-light); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.6rem; } .mapa-map-popup-body { padding: 10px 12px 12px; } .mapa-map-popup-body h4 { margin: 0 0 4px; font-size: 0.92rem; line-height: 1.25; color: var(--text-dark); } .mapa-map-popup-location { display: flex; align-items: center; gap: 4px; font-size: 0.74rem; color: var(--text-muted); } .mapa-map-popup-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .mapa-map-popup .badge-dificultad { position: static; display: inline-flex; align-items: center; gap: 4px; } .mapa-map-popup-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 9px; font-size: 0.8rem; font-weight: 600; color: var(--secondary-color); text-decoration: none; } .mapa-map-popup-link:hover { text-decoration: underline; } .mapa-map-empty { position: absolute; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; background: var(--card-bg); color: var(--text-muted); font-size: 0.92rem; } @media (max-width: 640px) { .mapa-map-wrap { height: 60vh; min-height: 360px; border-radius: 0; margin: 0 -20px; width: calc(100% + 40px); } .mapa-map-legend { max-width: calc(100% - 70px); } }