/* CoCo · mapa de terrenos estilo Airbnb (auto_test 2026-10-15)
   - Sin "Siguiente oportunidad", sin "¿Cuánto vale acá?" y sin tutorial de primera visita.
   - Filtros rápidos arriba, en una sola fila deslizable.
   - Lista abajo como hoja: cerrada muestra el total; abierta, tarjetas grandes con foto.
   - Ficha: contacto fijo abajo. */

/* ---------- lo que se saca del mapa ---------- */


/* ---------- pastillas de precio: "buen precio" (10% a 15% debajo) en verde claro ---------- */
.coco-price-pill[data-status=good] .coco-price-dot { background: #9fd36b; }

/* ---------- tarjetas de la lista (todas las pantallas) ---------- */
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 0 22px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  grid-template-columns: none !important;
}
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .c3r-photo {
  position: relative !important;
  order: 0 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin: 0 !important;
  flex: none !important;
  background: #e8ece9 !important;
}
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .c3r-photo img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0 !important;
}
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .c3r-card-body {
  order: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 10px 2px 0 !important;
  gap: 2px !important;
  position: static !important;
  min-width: 0 !important;
}
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .ct-kick,
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .ct-esc,
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .ct-esc-lbl { display: none !important; }
/* etiqueta de precio sobre la foto, como los distintivos de Airbnb */
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .c3r-card-top {
  position: absolute !important;
  top: 10px !important; left: 10px !important; right: 60px !important;
  display: flex !important; flex-wrap: wrap !important; gap: 6px !important;
  z-index: 3 !important; margin: 0 !important; pointer-events: none;
}
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .c3r-card-top > span {
  background: #fff !important; color: #1d2b26 !important;
  border: 0 !important; border-radius: 999px !important;
  padding: 5px 10px !important; font: 700 12px/1.1 Inter, system-ui, sans-serif !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18) !important;
}
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .c3r-card-top .c3r-delta.good { color: #0b7a56 !important; }
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .c3r-card-top .c3r-delta.high { color: #c2413b !important; }
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .c3r-card-top .c3r-coco-badge { color: #07564e !important; }
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .c3r-price {
  order: 1 !important; font: 700 17px/1.25 Inter, system-ui, sans-serif !important; color: #1d2b26 !important; margin: 0 !important;
}
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card h4 {
  order: 2 !important; font: 600 15px/1.3 Inter, system-ui, sans-serif !important; color: #1d2b26 !important;
  margin: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  -webkit-line-clamp: unset !important; display: block !important;
}
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card p {
  order: 3 !important; font: 400 14px/1.3 Inter, system-ui, sans-serif !important; color: #6a736f !important; margin: 0 !important;
}
/* corazón arriba a la derecha de la foto */
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .c3r-save {
  position: absolute !important; top: 8px !important; right: 8px !important; left: auto !important; bottom: auto !important;
  width: 38px !important; height: 38px !important; border-radius: 50% !important;
  background: rgba(255, 255, 255, .92) !important; border: 0 !important; z-index: 4 !important;
  display: grid !important; place-items: center !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .15) !important;
}
/* WhatsApp a mano, abajo a la derecha de la foto */
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .c3r-wa-mini {
  position: absolute !important; right: 8px !important; left: auto !important; top: 54px !important;
  bottom: auto !important; z-index: 4 !important; width: 38px !important; height: 38px !important; border-radius: 50% !important;
}
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card.is-selected .c3r-photo { outline: 3px solid #07564e !important; outline-offset: -3px; }

/* el botón "Mapa" sólo existe en el celular */
.ab-map-btn { display: none; }

/* ---------- celular ---------- */
@media (max-width: 900px) {
  /* filtros rápidos: arriba, una sola fila deslizable */
  html body #mapa-wrap.coco-view-terrenos .c3d-quickbar {
    position: absolute !important;
    top: 64px !important; bottom: auto !important; left: 0 !important; right: 0 !important;
    width: auto !important; max-width: none !important; transform: none !important;
    display: flex !important; flex-wrap: nowrap !important; gap: 8px !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    padding: 4px 12px 8px !important; margin: 0 !important;
    background: transparent !important; box-shadow: none !important; border: 0 !important;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; z-index: 820 !important;
  }
  html body #mapa-wrap.coco-view-terrenos .c3d-quickbar::-webkit-scrollbar { display: none; }
  html body #mapa-wrap.coco-view-terrenos .c3d-quickbar .c3d-chip {
    flex: none !important; height: 34px !important; padding: 0 14px !important;
    border-radius: 999px !important; border: 1px solid #dde2df !important;
    background: #fff !important; color: #1d2b26 !important;
    font: 600 13px/1 Inter, system-ui, sans-serif !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .10) !important; white-space: nowrap !important;
  }
  html body #mapa-wrap.coco-view-terrenos .c3d-quickbar .c3d-chip.on {
    background: #1d2b26 !important; color: #fff !important; border-color: #1d2b26 !important;
  }
  html body #mapa-wrap.coco-view-terrenos .c3d-quickbar > :not(.c3d-chip) { flex: none !important; }

  /* botones de ayuda y ubicación: a la derecha, debajo de los filtros; sin zoom +/- (se usa el gesto) */
  html body #mapa-wrap.coco-view-terrenos #ley-tgl { position: absolute !important; top: 112px !important; bottom: auto !important; right: 12px !important; }
  html body #mapa-wrap.coco-view-terrenos #btn-ubic { position: absolute !important; top: 162px !important; bottom: auto !important; right: 12px !important; }
  html body #mapa-wrap.coco-view-terrenos .leaflet-control-zoom { display: none !important; }

  /* hoja de resultados */
  html body #mapa-wrap.coco-view-terrenos .c3r-rail .ct-modo,
  html body #mapa-wrap.coco-view-terrenos .c3r-sheet-x,
  html body #mapa-wrap.coco-view-terrenos .c3r-reopen { display: none !important; }
  html body #mapa-wrap.coco-view-terrenos .c3r-rail {
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: auto !important; max-width: none !important;
    border-radius: 22px 22px 0 0 !important;
    background: #fff !important;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .14) !important;
    transition: height .28s cubic-bezier(.2, .8, .2, 1) !important;
    z-index: 900 !important;
  }
  html body #mapa-wrap.coco-view-terrenos .c3r-rail:not(.is-expanded) {
    height: calc(78px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }
  html body #mapa-wrap.coco-view-terrenos .c3r-rail:not(.is-expanded) .c3r-list-wrap,
  html body #mapa-wrap.coco-view-terrenos .c3r-rail:not(.is-expanded) .c3r-selected-slot,
  html body #mapa-wrap.coco-view-terrenos .c3r-rail:not(.is-expanded) .c3r-rail-head { display: none !important; }
  html body #mapa-wrap.coco-view-terrenos .c3r-rail.is-expanded {
    height: calc(100% - 58px) !important;
    display: flex !important; flex-direction: column !important;
  }
  html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-mobile-handle {
    position: relative !important; width: 100% !important; left: 0 !important; right: 0 !important;
    height: 64px !important; min-height: 64px !important; flex: none !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    text-align: center !important; padding: 14px 16px 8px !important;
  }
  html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-mobile-handle > i {
    position: absolute !important; top: 8px !important; left: 50% !important; transform: translateX(-50%) !important;
    width: 40px !important; height: 4px !important; border-radius: 4px !important; background: #c9cfcc !important; margin: 0 !important;
  }
  html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-mobile-handle span { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; }
  html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-mobile-handle b { font: 700 15px/1.2 Inter, system-ui, sans-serif !important; color: #1d2b26 !important; }
  html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-mobile-handle small { font: 400 12px/1.2 Inter, system-ui, sans-serif !important; color: #6a736f !important; }
  html body #mapa-wrap.coco-view-terrenos .c3r-rail.is-expanded .c3r-rail-head { display: none !important; }
  html body #mapa-wrap.coco-view-terrenos .c3r-rail.is-expanded .c3r-rail-head.ab-has-back { display: flex !important; padding: 0 16px 6px !important; }
  html body #mapa-wrap.coco-view-terrenos .c3r-rail.is-expanded .c3r-list-wrap {
    display: block !important; flex: 1 1 auto !important; min-height: 0 !important; height: auto !important;
    overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch;
    padding: 4px 16px 96px !important;
  }
  html body #mapa-wrap.coco-view-terrenos .c3r-rail.is-expanded .c3r-list {
    display: block !important; width: auto !important; flex-wrap: nowrap !important; gap: 0 !important;
    overflow: visible !important; padding: 0 !important; transform: none !important;
  }
  html body #mapa-wrap.coco-view-terrenos .c3r-rail.is-expanded .c3r-card { width: auto !important; min-width: 0 !important; max-width: none !important; scroll-snap-align: none !important; }
  html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-more { text-align: center; color: #6a736f; font: 400 13px Inter, system-ui, sans-serif; padding: 4px 0 16px; }

  /* botón flotante "Mapa" cuando la lista está abierta */
  .ab-map-btn {
    position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px);
    z-index: 2000; display: flex !important; align-items: center; gap: 8px;
    background: #1d2b26; color: #fff; border: 0; border-radius: 999px;
    padding: 13px 20px; font: 700 14px/1 Inter, system-ui, sans-serif;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28); opacity: 0; pointer-events: none;
    transition: opacity .2s, transform .2s; cursor: pointer;
  }
  .ab-map-btn svg { width: 16px; height: 16px; }
  body.ab-list-open .ab-map-btn { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
  body.ab-card-open .ab-map-btn { opacity: 0; pointer-events: none; }
}

/* ---------- ficha: contacto siempre a mano ---------- */
.cb.cf4 .ficha-acc {
  position: sticky !important; bottom: 0 !important; z-index: 6 !important;
  background: #fff !important; margin-top: 14px !important;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom)) !important;
  box-shadow: 0 -10px 14px -10px rgba(0, 0, 0, .18) !important;
}
.cfh .cfh-save.cfh-low b { font-size: 15px !important; }

/* =====================================================================
   v2 (pedido 15/10 15:22): tarjeta con color según precio, línea de CoCo,
   % y "vale / para CoCo"; filtros todos a la vista; pastilla de oportunidad
   verde con estrella; botones estilo Airbnb; ficha con más color.
   ===================================================================== */
:root {
  --ab-ink: #10262b; --ab-mute: #5f716d;
  --ab-opp: #0a8a62; --ab-opp2: #1db584;
  --ab-fair: #0d6e66; --ab-fair2: #2a9d8f;
  --ab-high: #c2453f; --ab-high2: #e2685d;
  --ab-none: #50625e; --ab-none2: #73847f;
  --ab-gold: #f4c542;
}

/* ---------- tarjeta de la lista: fondo según dónde cae el precio ---------- */
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card {
  padding: 10px 10px 12px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(16, 38, 43, .07) !important;
  background: #f5f7f6 !important;
  margin: 0 0 16px !important;
  transition: transform .15s, box-shadow .15s !important;
}
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card:hover { box-shadow: 0 8px 22px rgba(16, 38, 43, .10) !important; }
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card.ab-st-opp  { background: linear-gradient(180deg, #def4e9 0, #f1faf5 100%) !important; border-color: rgba(10, 138, 98, .22) !important; }
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card.ab-st-good { background: linear-gradient(180deg, #e8f6ef 0, #f5fbf8 100%) !important; border-color: rgba(10, 138, 98, .15) !important; }
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card.ab-st-fair { background: linear-gradient(180deg, #eaf3f2 0, #f6faf9 100%) !important; border-color: rgba(13, 110, 102, .13) !important; }
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card.ab-st-high { background: linear-gradient(180deg, #fbe9e7 0, #fdf5f4 100%) !important; border-color: rgba(194, 69, 63, .16) !important; }
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .c3r-photo { border-radius: 14px !important; }
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .c3r-save { top: 18px !important; right: 18px !important; }
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .c3r-wa-mini { top: 64px !important; right: 18px !important; }
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .c3r-card-top { top: 20px !important; left: 20px !important; }
/* el % ahora va en el cuerpo de la tarjeta, grande y con color */
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .c3r-card-top .c3r-delta { display: none !important; }
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .c3r-card-body { padding: 10px 4px 0 !important; }
/* la línea de CoCo vuelve a la tarjeta */
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .ct-esc,
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .ct-esc-lbl { display: block !important; order: 6 !important; }
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .ct-esc-lbl { display: flex !important; }
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .ct-esc { margin-top: 10px !important; }
.ab-val { order: 5; display: grid; gap: 6px; margin-top: 8px; }
.ab-val-pct { display: inline-flex; align-items: center; gap: 6px; font: 800 14px/1.2 Inter, system-ui, sans-serif; color: var(--ab-mute); }
.ab-val-pct.opp, .ab-val-pct.good { color: var(--ab-opp); }
.ab-val-pct.fair { color: var(--ab-fair); }
.ab-val-pct.high { color: var(--ab-high); }
.ab-val-pct .ab-star { color: var(--ab-gold); font-size: 15px; text-shadow: 0 1px 0 rgba(0, 0, 0, .15); }
.ab-val-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ab-val-duo > div { background: rgba(255, 255, 255, .78); border-radius: 12px; padding: 7px 9px; }
.ab-val-duo span { display: block; font: 600 11px/1.2 Inter, system-ui, sans-serif; color: var(--ab-mute); text-transform: uppercase; letter-spacing: .03em; }
.ab-val-duo b { display: block; font: 800 15px/1.25 Inter, system-ui, sans-serif; color: var(--ab-ink); font-variant-numeric: tabular-nums; margin-top: 2px; }
.ab-val-duo .is-coco b { color: var(--ab-fair); }

/* ---------- botón único para ordenar por precio ---------- */
.ab-sort {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid #d9dfdc; background: #fff; color: var(--ab-ink); border-radius: 999px;
  padding: 7px 12px; font: 700 12.5px/1 Inter, system-ui, sans-serif; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.ab-sort.on { background: var(--ab-ink); color: #fff; border-color: var(--ab-ink); }
.ab-sort svg { width: 14px; height: 14px; }
html body #mapa-wrap .c3r-rail-head .ab-sort { margin-top: 8px; }

/* ---------- pastilla de oportunidad (no destacada): verde entera con estrella dorada ---------- */
.coco-price-pill[data-status=opportunity] {
  background: linear-gradient(135deg, var(--ab-opp) 0, var(--ab-opp2) 100%) !important;
  color: #fff !important; border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(10, 138, 98, .35) !important;
}
.coco-price-pill[data-status=opportunity] .coco-price-dot {
  width: auto !important; height: auto !important; border-radius: 0 !important; background: none !important;
  display: inline-flex !important; align-items: center;
}
.coco-price-pill[data-status=opportunity] .coco-price-dot::before {
  content: "★"; color: var(--ab-gold); font-size: 14px; line-height: 1; font-style: normal;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.coco-price-pill[data-status=opportunity] small { border-left-color: rgba(255, 255, 255, .45) !important; }
.coco-price-pill[data-status=opportunity].is-active { background: #06513a !important; }

/* ---------- botones de arriba: filtros y cerrar, estilo Airbnb ---------- */
html body #mapa-wrap .c3d-filter-btn .ab-ico-filtros { display: inline-flex; width: 18px; height: 18px; }
html body #mapa-wrap .c3d-filter-btn .ab-ico-filtros svg { width: 18px; height: 18px; }
html body #mapa-wrap #mapa-cerrar.ab-cerrar {
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
  background: #fff !important; color: var(--ab-ink) !important; border: 1px solid #dde2df !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14) !important; display: grid !important; place-items: center !important;
  padding: 0 !important; font-size: 0 !important; line-height: 0 !important;
}
html body #mapa-wrap #mapa-cerrar.ab-cerrar svg { width: 16px; height: 16px; }
html body #mapa-wrap #mapa-cerrar.ab-cerrar:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .2) !important; }

@media (max-width: 900px) {
  /* filtros rápidos: todos a la vista (dos filas), sin deslizar */
  html body #mapa-wrap.coco-view-terrenos .c3d-quickbar {
    flex-wrap: wrap !important; overflow: visible !important; right: 0 !important;
    gap: 6px !important; padding: 2px 10px 6px !important;
  }
  html body #mapa-wrap.coco-view-terrenos .c3d-quickbar .c3d-chip {
    height: 30px !important; padding: 0 11px !important; font-size: 12.5px !important;
  }
  /* ayuda y ubicación: debajo de los filtros */
  html body #mapa-wrap.coco-view-terrenos #ley-tgl { top: calc(var(--ab-qb, 136px) + 8px) !important; }
  html body #mapa-wrap.coco-view-terrenos #btn-ubic { top: calc(var(--ab-qb, 136px) + 58px) !important; }
  /* con la lista abierta: la lista arranca debajo de los filtros y nada del mapa se le encima */
  html body #mapa-wrap.coco-view-terrenos .c3r-rail.is-expanded {
    top: var(--ab-qb, 136px) !important; height: auto !important; bottom: 0 !important;
  }
  body.ab-list-open #mapa-wrap #ley-tgl,
  body.ab-list-open #mapa-wrap #btn-ubic,
  body.ab-list-open #mapa-wrap .coco-mapa-sel,
  body.ab-list-open #mapa-wrap #coco-map-legend,
  body.ab-list-open #mapa-wrap .puebla-map-brand { display: none !important; }
  html body #mapa-wrap #c3r-rail #c3r-sheet-x,
  html body #mapa-wrap #c3r-rail .c3r-collapse { display: none !important; }
  /* botón de ordenar, arriba a la derecha de la lista abierta */
  html body #mapa-wrap .c3r-rail > .ab-sort { position: absolute; top: 16px; right: 14px; z-index: 3; display: none; }
  html body #mapa-wrap .c3r-rail.is-expanded > .ab-sort { display: inline-flex; }
  html body #mapa-wrap.coco-view-terrenos .c3r-rail.is-expanded .c3r-mobile-handle { justify-content: flex-start !important; padding-left: 18px !important; padding-right: 150px !important; }
  html body #mapa-wrap.coco-view-terrenos .c3r-rail.is-expanded .c3r-mobile-handle span { align-items: flex-start !important; text-align: left !important; }
  html body #mapa-wrap .c3d-filter-btn { width: 44px !important; height: 44px !important; border-radius: 50% !important; padding: 0 !important; display: grid !important; place-items: center !important; background: #fff !important; border: 1px solid #dde2df !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .12) !important; }
  html body #mapa-wrap .c3d-filter-btn .lbl { display: none !important; }
}
@media (min-width: 901px) {
  html body #mapa-wrap .c3d-filter-btn { border-radius: 999px !important; background: #fff !important; border: 1px solid #dde2df !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .10) !important; gap: 8px !important; font-weight: 700 !important; color: var(--ab-ink) !important; }
}

/* ---------- ficha: más color, misma información ---------- */
#mapa-wrap #card .cf4 .loc { order: -1; font: 800 11.5px/1.2 Inter, sans-serif !important; text-transform: uppercase; letter-spacing: .06em; color: var(--ab-fair) !important; margin: 0 0 4px !important; }
#mapa-wrap #card .cf4 .dir { font-size: 22px !important; }
#card .cfh { --c: #fff; color: #fff; border: 0 !important; background: linear-gradient(140deg, var(--ab-fair) 0, var(--ab-fair2) 100%) !important; box-shadow: 0 14px 30px rgba(13, 110, 102, .25); }
#card .cfh.cfh-good { background: linear-gradient(140deg, var(--ab-opp) 0, var(--ab-opp2) 100%) !important; box-shadow: 0 14px 30px rgba(10, 138, 98, .28); }
#card .cfh.cfh-high { background: linear-gradient(140deg, var(--ab-high) 0, var(--ab-high2) 100%) !important; box-shadow: 0 14px 30px rgba(194, 69, 63, .25); }
#card .cfh.cfh-none { background: linear-gradient(140deg, var(--ab-none) 0, var(--ab-none2) 100%) !important; box-shadow: 0 14px 30px rgba(40, 60, 56, .2); }
#card .cfh.cfh-gold { background: linear-gradient(140deg, #087a56 0, #16a877 60%, #3cb879 100%) !important; box-shadow: 0 14px 34px rgba(10, 138, 98, .35), inset 0 0 0 2px rgba(244, 197, 66, .65); }
#card .cfh .cfh-tag { background: #fff !important; color: var(--ab-ink) !important; }
#card .cfh.cfh-good .cfh-tag, #card .cfh.cfh-gold .cfh-tag { color: var(--ab-opp) !important; }
#card .cfh.cfh-high .cfh-tag { color: var(--ab-high) !important; }
#card .cfh.cfh-gold .cfh-tag::first-letter { color: var(--ab-gold); }
#card .cfh .cfh-pct { color: #fff !important; font-size: 15px !important; }
#card .cfh .cfh-price b { color: #fff !important; font-size: 38px !important; }
#card .cfh .cfh-price span { color: rgba(255, 255, 255, .85) !important; }
#card .cfh .cfh-save { background: #fff !important; }
#card .cfh.cfh-good .cfh-save b, #card .cfh.cfh-gold .cfh-save b { color: var(--ab-opp) !important; }
#card .cfh.cfh-high .cfh-save b { color: var(--ab-high) !important; }
#card .cfh .cfh-save.cfh-low b { color: var(--ab-ink) !important; }
#card .cfh-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
#card .cfh-duo > div { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); border-radius: 14px; padding: 9px 11px; }
#card .cfh-duo span { display: block; font: 700 11px/1.2 Inter, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: rgba(255, 255, 255, .85); }
#card .cfh-duo b { display: block; font: 800 18px/1.25 Inter, sans-serif; color: #fff; margin-top: 3px; font-variant-numeric: tabular-nums; }
#card .cfh .cfh-scale { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
#card .cfh .cfh-zone { background: #fff !important; opacity: .9 !important; }
#card .cfh .cfh-dot { border-color: var(--ab-ink) !important; }
#card .cfh .cfh-scale-lbl { color: rgba(255, 255, 255, .88) !important; }
#card .cfh .cfh-row span { color: rgba(255, 255, 255, .9) !important; }
#card .cfh .cfh-row em { color: #fff !important; }
#card .cfh .cfh-row i { background: rgba(255, 255, 255, .22) !important; }
#card .cfh .cfh-row u { background: #fff !important; }
#card .cfh .cfh-row.zone u { background: rgba(255, 255, 255, .55) !important; }
#card .cfh .cfh-foot { color: rgba(255, 255, 255, .85) !important; }
#card .cfh .cfh-how { color: #fff !important; }
/* medidas: tres fichas con color */
#mapa-wrap #card .coco-ficha-specs { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; margin-top: 14px !important; }
#mapa-wrap #card .coco-ficha-specs > div { background: #f1f7f5 !important; border: 0 !important; border-radius: 14px !important; padding: 10px 8px !important; text-align: center !important; border-top: 3px solid var(--ab-fair2) !important; }
#mapa-wrap #card .coco-ficha-specs b { display: block; font: 800 17px/1.2 Inter, sans-serif !important; color: var(--ab-ink) !important; }
#mapa-wrap #card .coco-ficha-specs span { font: 600 11.5px/1.2 Inter, sans-serif !important; color: var(--ab-mute) !important; text-transform: uppercase; letter-spacing: .04em; }
/* servicios y datos: pastillas suaves con tilde */
#mapa-wrap #card .cf4-chips { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 12px !important; }
#mapa-wrap #card .cf4-chips .chip { background: #e9f5f1 !important; color: var(--ab-fair) !important; border: 0 !important; border-radius: 999px !important; padding: 6px 11px !important; font: 700 12.5px/1.1 Inter, sans-serif !important; }
#mapa-wrap #card .cf4-chips .chip::before { content: "✓ "; font-weight: 900; }
#mapa-wrap #card .cf4-chips .chip.fin { background: #fff4d6 !important; color: #8a6200 !important; }
#mapa-wrap #card .cf4-chips .chip.fin::before { content: "$ "; }
#mapa-wrap #card .cf4-hist .coco-ficha-price-history { border-radius: 12px !important; }
/* barra de contacto fija: WhatsApp protagonista */
#mapa-wrap #card .ficha-acc { display: flex !important; gap: 8px !important; align-items: stretch !important; }
#mapa-wrap #card .ficha-acc .fa-wa {
  flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  background: #1fae5b !important; color: #fff !important; border: 0 !important; border-radius: 14px !important;
  min-height: 50px !important; font: 800 15.5px/1 Inter, sans-serif !important; box-shadow: 0 6px 16px rgba(31, 174, 91, .3) !important; text-decoration: none !important;
}
#mapa-wrap #card .ficha-acc .fa-pub {
  flex: 0 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important;
  background: #fff !important; color: var(--ab-ink) !important; border: 1.5px solid var(--ab-ink) !important; border-radius: 14px !important;
  min-height: 50px !important; padding: 0 14px !important; font: 700 13.5px/1.1 Inter, sans-serif !important; text-decoration: none !important;
}
#mapa-wrap #card .ficha-acc .fa-pub:only-child, #mapa-wrap #card .ficha-acc .fa-pub:first-child:last-child { flex: 1 1 auto !important; background: var(--ab-ink) !important; color: #fff !important; }

/* =====================================================================
   v3 (pedido 15/10 15:44): lista hasta arriba, ordenar sólo con ícono,
   botones redondos blancos y centrados, controles del mapa debajo de los
   filtros, ficha a pantalla completa y un poco más chica.
   ===================================================================== */
/* cerrar mapa: una sola cruz, blanca como filtros */
html body #mapa-wrap #mapa-cerrar.ab-cerrar,
html body #mapa-wrap.fs #mapa-cerrar.ab-cerrar,
html body #mapa-wrap.coco-view-terrenos.fs #mapa-cerrar.ab-cerrar {
  background: #fff !important; background-image: none !important; color: var(--ab-ink) !important;
  border: 1px solid #dde2df !important; border-radius: 50% !important;
  width: 44px !important; height: 44px !important; padding: 0 !important; margin: 0 !important;
  display: grid !important; place-items: center !important; font-size: 0 !important; line-height: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12) !important;
}
html body #mapa-wrap #mapa-cerrar.ab-cerrar::before,
html body #mapa-wrap #mapa-cerrar.ab-cerrar::after { content: none !important; display: none !important; }
html body #mapa-wrap #mapa-cerrar.ab-cerrar svg { width: 18px !important; height: 18px !important; display: block !important; margin: 0 !important; }
/* filtros: ícono centrado */
html body #mapa-wrap #c3d-filter-btn .ico.ab-ico-filtros {
  width: auto !important; height: auto !important; min-width: 0 !important; display: grid !important; place-items: center !important;
  margin: 0 !important; padding: 0 !important; position: static !important; background: none !important; font-size: 0 !important; line-height: 0 !important;
}
html body #mapa-wrap #c3d-filter-btn .ico.ab-ico-filtros svg { width: 20px !important; height: 20px !important; display: block !important; }
/* ordenar: sólo el botón con las flechas */
.ab-sort { width: 40px; height: 40px; padding: 0 !important; justify-content: center; border-radius: 50% !important; }
.ab-sort svg { width: 18px !important; height: 18px !important; }
.ab-sort span { display: none !important; }
html body #mapa-wrap .c3r-rail-head .ab-sort { margin-top: 6px; }

@media (max-width: 900px) {
  /* la lista abierta sube hasta debajo de la barra de búsqueda */
  html body #mapa-wrap.coco-view-terrenos .c3r-rail.is-expanded { top: 62px !important; }
  html body #mapa-wrap .c3r-rail > .ab-sort { top: 12px; right: 14px; }
  html body #mapa-wrap.coco-view-terrenos .c3r-rail.is-expanded .c3r-mobile-handle { padding-right: 70px !important; }
  /* selector de estilo del mapa, ayuda y ubicación: una columna a la derecha, debajo de los filtros */
  html body #mapa-wrap.coco-view-terrenos .coco-mapa-sel { top: calc(var(--ab-qb, 140px) + 8px) !important; right: 12px !important; left: auto !important; bottom: auto !important; }
  html body #mapa-wrap.coco-view-terrenos #ley-tgl { top: calc(var(--ab-qb, 140px) + 54px) !important; right: 12px !important; }
  html body #mapa-wrap.coco-view-terrenos #btn-ubic { top: calc(var(--ab-qb, 140px) + 104px) !important; right: 12px !important; }
  /* créditos del mapa: abajo a la izquierda, sobre la hoja de resultados */
  html body #mapa-wrap.coco-view-terrenos .coco-terrain-credito {
    top: auto !important; right: auto !important; left: 8px !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important; z-index: 850 !important; opacity: .85;
  }
  html body #mapa-wrap.coco-view-terrenos .leaflet-control-attribution { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
  body.ab-list-open #mapa-wrap .coco-terrain-credito { display: none !important; }
  /* ficha a pantalla completa */
  html body #mapa-wrap #card.on {
    position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important; height: auto !important; max-height: none !important; max-width: none !important;
    border-radius: 0 !important; margin: 0 !important; transform: none !important;
    z-index: 12000 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch;
  }
  html body #mapa-wrap #card.on > .cb { zoom: .9; }
  html body #mapa-wrap #card.on .card-x { position: sticky !important; top: 10px !important; float: right; margin: 10px 10px -54px 0 !important; z-index: 20 !important;
    width: 40px !important; height: 40px !important; border-radius: 50% !important; background: #fff !important; color: var(--ab-ink) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2) !important; border: 0 !important; font-size: 24px !important; line-height: 40px !important; text-align: center !important; padding: 0 !important; }
}
@media (min-width: 901px) {
  html body #mapa-wrap #card.on > .cb { zoom: .93; }
}
/* destacados pagos arriba de su referencia: sin color de "caro" ni línea */
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card.ab-st-own { background: linear-gradient(180deg, #fbf6e6 0, #fffdf6 100%) !important; border-color: rgba(184, 134, 11, .25) !important; }
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card.ab-st-own .ct-esc,
html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card.ab-st-own .ct-esc-lbl { display: none !important; }
.ab-val-pct.own { color: #8a6200; }
@media (max-width: 900px) {
  /* cada tarjeta ocupa como mucho ~3/4 de la pantalla: siempre asoma la siguiente */
  html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card .c3r-photo { aspect-ratio: auto !important; height: clamp(150px, 32vh, 270px) !important; }
  html body #mapa-wrap.coco-view-terrenos .c3r-rail .c3r-card { max-height: 72vh !important; overflow: hidden !important; }
}
@media (max-width: 900px) {
  /* la lista abierta ocupa toda la pantalla */
  html body #mapa-wrap.coco-view-terrenos .c3r-rail.is-expanded {
    top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: auto !important;
    border-radius: 0 !important; z-index: 11000 !important; padding-top: env(safe-area-inset-top) !important;
  }
  html body #mapa-wrap .ab-map-btn { z-index: 11500 !important; }
}
@media (max-width: 900px) {
  /* ficha: la foto más baja para que el bloque de precio entre en la primera vista */
  html body #card.on .ficha-galeria { height: 30vh !important; max-height: 30vh !important; min-height: 0 !important; }
  html body #card.on .ficha-galeria img, html body #card.on .ficha-galeria video { height: 100% !important; object-fit: cover !important; }
}
html body #mapa-wrap #mapa-cerrar.ab-cerrar.cerrar-fs::before,
html body #mapa-wrap #mapa-cerrar.ab-cerrar.cerrar-fs::after { content: none !important; display: none !important; font-size: 0 !important; }

/* ab10: publicacion paga por encima del valor CoCo: la ficha no muestra la comparacion con la zona */
#card .cfh.cfh-own-up .cfh-scale,#card .cfh.cfh-own-up .cfh-scale-lbl,#card .cfh.cfh-own-up .cfh-bars,#card .cfh.cfh-own-up .cfh-save,#card .cfh.cfh-own-up .cfh-pct{display:none!important}

/* ab11: filtros rapidos centrados */
html body #mapa-wrap.coco-view-terrenos .c3d-quickbar{justify-content:center!important;align-content:center!important}
@media (max-width:900px){html body #mapa-wrap.coco-view-terrenos .c3d-quickbar{left:0!important;right:0!important;width:100%!important;margin:0 auto!important;padding-left:10px!important;padding-right:10px!important;box-sizing:border-box!important}}

/* ab13: tarjeta de Puebla (fotos y precio) en el celular: abajo a la izquierda, sobre la lista, sin tapar los filtros */
@media (max-width:900px){html body #mapa-wrap .puebla-lot-hint{top:auto!important;bottom:calc(92px + env(safe-area-inset-bottom))!important;left:12px!important;right:auto!important;z-index:860!important}
body.ab-list-open #mapa-wrap .puebla-lot-hint,body.ab-card-open #mapa-wrap .puebla-lot-hint{display:none!important}}

/* ab15 · Galería de Puebla: fotos grandes, contactos compactos, pantalla completa */
.pbg-dialog{width:min(980px,calc(100vw - 16px))!important;max-height:calc(100dvh - 16px)!important}
.pbg-head{padding:8px 10px 8px 16px!important}
.pbg-acts{display:flex;gap:8px;align-items:center}
.pbg-fs{font-size:22px!important}
.pbg-strip img{aspect-ratio:auto!important;height:min(62dvh,620px)!important;max-height:none!important;object-fit:cover!important;cursor:zoom-in}
.pbg-nav{padding:8px 0 2px!important;gap:16px!important}
.pbg-nav .pbg-button{min-width:38px!important;min-height:38px!important;font-size:22px!important}
.pbg-note{margin:6px 12px 10px!important}
.pbg-contacts{padding:2px 12px 14px!important}
.pbg-contacts h3{font-size:14px!important}
.pbg-contact-sub{font-size:11px!important;margin:3px 0 8px!important}
.pbg-contact-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}
.pbg-contact{position:relative;min-height:40px!important;padding:6px 8px 6px 28px!important;gap:0!important;border-radius:10px!important;font-size:12px!important;line-height:1.15;align-items:center}
.pbg-contact small{display:none!important}
.pbg-contact::before,.pbg-contact>svg,.pbg-contact>i,.pbg-contact>img{width:16px!important;height:16px!important;background-size:16px 16px!important;position:absolute!important;left:8px!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important}
@media (max-width:760px){.pbg-contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.pbg-strip img{height:min(58dvh,520px)!important}}
.pbg-dialog.pbg-full{width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;border-radius:0!important;background:#000!important;overflow:hidden!important}
.pbg-dialog.pbg-full .pbg-head{position:absolute!important;top:0;left:0;right:0;z-index:3;background:linear-gradient(#000b,#0000)!important}
.pbg-dialog.pbg-full .pbg-head h2{color:#fff!important}
.pbg-dialog.pbg-full .pbg-strip{height:100dvh;background:#000}
.pbg-dialog.pbg-full .pbg-strip img{height:100dvh!important;object-fit:contain!important;cursor:zoom-out}
.pbg-dialog.pbg-full .pbg-nav{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));z-index:3;color:#fff}
.pbg-dialog.pbg-full .pbg-note,.pbg-dialog.pbg-full .pbg-contacts{display:none!important}
#card .pbg-contacts-ficha{margin:14px 0 4px;padding:12px!important;border-radius:16px;background:#eef6f2;text-align:left}
#card .pbg-contacts-ficha h3{font-size:15px!important;color:#0d3b33}

/* ab16 · los carteles viejos de precio ya no se usan: las pastillas los reemplazan */

/* ab16 · línea verde con pulso entre destacado y cluster */
.coco-feat-links{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.leaflet-container>.coco-feat-links{z-index:450}
.coco-feat-links .cfl-glow{fill:none;stroke:#12a37f;stroke-opacity:.18;stroke-width:7;stroke-linecap:round}
.coco-feat-links .cfl-flow{fill:none;stroke:#0f9a77;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:2 7;animation:cfl-flow 1.1s linear infinite}
.coco-feat-links .cfl-dot{fill:#14b98e;filter:drop-shadow(0 0 4px rgba(20,185,142,.9))}
@keyframes cfl-flow{from{stroke-dashoffset:18}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.coco-feat-links .cfl-flow{animation:none}.coco-feat-links .cfl-dot{display:none}}
/* ab16 · cuadrado de Puebla en el mapa, 20% más chico */
.puebla-map-brand{width:59.5px!important;height:52.7px!important;border-radius:10px!important}
.puebla-map-brand img{border-radius:8px!important}
@media (max-width:760px){.puebla-map-brand{width:54.1px!important;height:48.7px!important}}

/* ab18 · destacado en oportunidad: solo la palabra, en verde */
#mapa-wrap .coco-featured-opportunity{display:none!important}
#mapa-wrap .coco-featured-sub.is-opp{background:#118b68!important;color:#fff!important;border-color:#118b68!important}

/* ab20 · los pinchitos viejos (banderines) no se usan: pastillas o círculos */
#mapa-wrap .coco-mini-pin-wrap{display:none!important;pointer-events:none!important}

/* fix galeria Puebla: fotos completas sin recorte */
.pbg-strip img{object-fit:contain!important;background:#102d27}