/* Mapa */ .dag-map-wrap { position: relative; } #dag-proyectos-map { width: 100%; height: 640px; border-radius: 16px; overflow: hidden; background-color: #f7f7f7; } .dag-list-toggle-btn { display: none; } /* Oculto por defecto: solo se activa dentro del media query mobile. Sin esto, si la página carga en desktop y el usuario reduce la ventana sin recargar, o viceversa, el sheet (que vive al final de ) queda visible como un bloque normal fuera de lugar (aparece "fantasma" bajo el footer). */ .dag-mobile-sheet { display: none; } /* Confina los z-index internos de Leaflet (paneles/controles hasta 1000) a este contenedor para que no se escapen por encima del header fijo del sitio (z-index:111) al hacer scroll. */ #dag-proyectos-map.leaflet-container { z-index: 0; } .dag-map-pin { width: 18px; height: 18px; background-color: #e88f45; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } .dag-map-cluster { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 36px; height: 36px; background-color: #e88f45; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); color: #fff; font-family: 'Source Sans 3', sans-serif; font-weight: 600; font-size: 14px; text-align: center; line-height: 32px; } .dag-map-cluster span { display: block; } .dag-map-popup { display: flex; flex-direction: column; width: 224px; padding: 0.625rem; gap: 0.75rem; } /* Leaflet trae una regla propia (.leaflet-popup-content > * con !important) que resetea el padding izq/der a 0 y el vertical a 0.2rem, generando una inconsistencia con el padding de 6px de .dag-map-popup__body (que sí queda intacto por no ser hijo directo). Se iguala especificidad + !important para que gane la nuestra: como este archivo se encola después del CSS de Leaflet, el empate de especificidad lo resuelve el orden de carga. */ .leaflet-popup-content > .dag-map-popup { padding: 0.625rem !important; } .dag-map-popup > a { display: block; } .dag-map-popup img { width: 100%; height: 132px; object-fit: cover; border-radius: 14px; display: block; } .dag-map-popup__body { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 0.375rem 0.5rem; font-family: 'Source Sans 3', sans-serif; } .dag-map-popup__body strong { color: #1a1714; font-size: 19px; font-weight: 700; line-height: 1.25; } .dag-map-popup__body span { color: #656565; font-size: 15px; } .dag-map-popup__body a { color: #e88f45; font-size: 15px; font-weight: 700; text-decoration: none; margin-top: 0.25rem; } /* El tema (style.min.css) trae su propio estilo para popups de Leaflet con padding asimétrico a propósito (deja espacio de más a la derecha para su botón de cerrar nativo, que aquí no se usa: closeButton:false). Como no tiene !important pero carga después de este archivo en algunos contextos, se fuerza con !important para que nuestro padding simétrico siempre gane. */ .leaflet-popup-content-wrapper { padding: 0 !important; border-radius: 20px; box-shadow: 0 16px 40px rgba(26, 23, 20, 0.18); } .leaflet-popup-content { margin: 0 !important; width: auto !important; } .leaflet-popup-tip-container { width: 30px; height: 15px; } .leaflet-popup-tip { background-color: #fff; box-shadow: none; } /* Listado */ .dag-proyectos-list { display: flex; flex-direction: column; gap: 1rem; } .dag-proyecto-card { display: flex; align-items: stretch; height: 152px; background-color: #f7f7f7; border: 1px solid #e3e3e3; border-radius: 16px; overflow: hidden; text-decoration: none; transition: border-color 0.15s ease; /* Base para escalar el texto interno en em (ver mobile más abajo): al cambiar solo este valor, título/meta/ubicación escalan juntos. */ font-size: 16px; } .dag-proyecto-card.is-active, .dag-proyecto-card:hover { border-color: #e88f45; } .dag-proyecto-card__image { flex: 0 0 170px; height: 100%; background-color: #e3e3e3; } .dag-proyecto-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .dag-proyecto-card__body { flex: 1 1 auto; padding: 1.25rem 1.5rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0; min-width: 0; overflow: hidden; } .dag-proyecto-card__body > .dag-status-pill { /* Homologado con el gap tag->título de la card vertical (Grid Layout 224) */ margin-bottom: 0.75rem; } .dag-status-pill { display: inline-block; width: fit-content; background-color: rgba(232, 143, 69, 0.12); color: #e88f45; font-family: 'Source Sans 3', sans-serif; font-size: 12px; line-height: normal; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; padding: 0.25rem 0.75rem; border-radius: 100px; } /* Color por estado (mismo criterio de colores que la card vertical y el badge de detalle de proyecto, ver Zephyr-child/style.css). El color plano de arriba queda como respaldo para un estado sin variante. */ .dag-status-pill--adjudicado { background-color: rgba(124, 58, 237, 0.12); color: #8b5cf6; } .dag-status-pill--en-desarrollo { background-color: rgba(37, 99, 235, 0.12); color: #3b82f6; } .dag-status-pill--en-construccion { background-color: rgba(217, 119, 6, 0.12); color: #f59e0b; } .dag-status-pill--entregado { background-color: rgba(22, 163, 74, 0.12); color: #22c55e; } .dag-proyecto-card__title { font-family: 'Gotham', 'Source Sans 3', sans-serif; font-weight: 500; font-size: 1.125em; /* 18px sobre la base de 16px */ line-height: 1.35; color: #1a1714; /* Homologado con el gap título->comuna/región de la card vertical (Grid Layout 224) */ margin: 0 0 0.5rem; padding: 0; } .dag-proyecto-card__location { font-family: 'Source Sans 3', sans-serif; font-size: 1em; /* 16px — homologado con el tamaño de la card vertical (Grid Layout 224) */ line-height: 1.5; color: #656565; margin: 0; display: flex; align-items: center; gap: 0.25rem; } /* Mobile (≤600px, mismo umbral que "mobiles_breakpoint" del tema): mapa inmersivo a pantalla completa (solo navbar + mapa), botón "Lista" flotante y bottom sheet (listado o proyecto/cluster seleccionado) en vez del listado apilado plano. */ @media (max-width: 600px) { /* El hero de texto (eyebrow/H1/subtítulo) se oculta: en mobile solo se ve la navbar y el mapa ocupando el resto de la pantalla. Nota: WPBakery envuelve cada vc_row en su propio contenedor .l-section-h individual, así que ":first-of-type" (basado en tag, no en clase) coincide con TODAS las filas por igual — de ahí el el_class explícito. */ .dag-proyectos-hero { display: none !important; } .dag-map-wrap { /* Fallback si el JS aún no corrió; se ajusta a calc(100vh - header) */ height: 100vh; } #dag-proyectos-map { height: 100%; border-radius: 0; } .dag-list-toggle-btn { display: flex; align-items: center; gap: 0.5rem; position: absolute; top: 16px; right: 16px; z-index: 10; background-color: #fff; border: none; border-radius: 999px; padding: 0.625rem 1rem; font-family: 'Source Sans 3', sans-serif; font-size: 14px; font-weight: 600; color: #1a1714; box-shadow: 0 4px 16px rgba(26, 23, 20, 0.18); cursor: pointer; } .dag-list-toggle-btn.is-active { background-color: #1a1714; color: #fff; } .dag-list-toggle-btn i { font-size: 13px; } /* Bottom sheet: mismo patrón de transform+transition que usa el menú mobile del tema (translateY + cubic-bezier(.4,0,.2,1) .3s). Alto dinámico según contenido (1 proyecto, un cluster chico, o el listado completo), con un tope máximo para siempre dejar ~30-40% del mapa a la vista. */ .dag-mobile-sheet { position: fixed; left: 0; right: 0; bottom: 0; height: auto; max-height: 70vh; background-color: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -8px 32px rgba(26, 23, 20, 0.18); z-index: 90; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); touch-action: none; } .dag-mobile-sheet.is-dragging { transition: none; } .dag-mobile-sheet__handle { flex: 0 0 auto; display: flex; justify-content: center; padding: 0.75rem 0 0.5rem; cursor: grab; touch-action: none; } .dag-mobile-sheet__handle-bar { width: 36px; height: 4px; border-radius: 2px; background-color: #e3e3e3; } .dag-mobile-sheet__close { position: absolute; top: 14px; right: 16px; z-index: 2; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background-color: #f7f7f7; border: none; border-radius: 50%; color: #1a1714; cursor: pointer; } .dag-mobile-sheet__content { flex: 1 1 auto; /* Permite que el contenido se achique en vez de desbordar cuando el sheet alcanza max-height: sin esto un flex item no encoge bajo su alto de contenido y el scroll interno nunca llegaría a activarse. */ min-height: 0; overflow-y: auto; /* padding-top holgado para que la primera card no quede debajo del botón de cerrar (que ocupa hasta ~46px desde arriba del sheet). */ padding: 2.25rem 1.25rem 1.5rem; -webkit-overflow-scrolling: touch; } .dag-mobile-sheet__project-content { /* En modo cluster (2+ proyectos) las cards se apilan sin espacio si no se declara el mismo gap que ya usa .dag-proyectos-list. */ display: flex; flex-direction: column; gap: 1rem; } .dag-mobile-sheet[data-mode="list"] .dag-mobile-sheet__project-content { display: none; } .dag-mobile-sheet[data-mode="project"] .dag-mobile-sheet__list-content { display: none; } body.dag-sheet-open { overflow: hidden; } /* Card compacta: en pantallas angostas se achica la imagen y se reduce la base de font-size (el resto del texto está en em, así que escala todo junto). */ .dag-proyecto-card { font-size: 14px; } .dag-proyecto-card__image { flex-basis: 110px; } }