/* mapa.css — la pestaña Mapa: el conjunto sobre el render aéreo, el
   edificio sobre la fachada tipo y el apartamento sobre la planta tipo.

   Todo va con prefijo `mp-` y colgado de #v-mapa para no chocar con las
   clases de casa.css (que ya tiene .cifras, .chip, .fila…). Los colores
   salen de los mismos tokens de la casa: el mapa es una pantalla más, no
   otro producto. */

#v-mapa{--mp-vend:#55617a; --mp-vend-suave:#e4e7ec; --mp-lib:#b5b9b6; --mp-lib-suave:#eceeec;
        --mp-oscuro:#0b1220; --mp-claro:#f5f2ea; --mp-disp:#2a7a57; --mp-res:#b4761c}

.mp-miga{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--tinta-3);flex-wrap:wrap;margin:0 0 12px}
.mp-miga button{background:none;border:0;padding:6px 10px;border-radius:999px;cursor:pointer;color:var(--tinta-2);font:inherit;min-height:34px}
.mp-miga button:hover{background:var(--marca-suave);color:var(--marca)}
.mp-miga [aria-current="page"]{color:var(--tinta);font-weight:600;cursor:default}
.mp-miga [aria-current="page"]:hover{background:none}
.mp-miga .mp-sep{opacity:.6}

.mp-esc{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}
.mp-esc > *{min-width:0}
@media (max-width:960px){ .mp-esc{grid-template-columns:minmax(0,1fr)} }

/* La vista del edificio: la fachada mide 1800x700, ancha y baja. Con el
   panel al lado el lienzo quedaba chico y con medio lado vacio. Aqui la
   fachada ocupa todo el ancho y el panel va debajo, en dos columnas. */
#v-mapa.vista-edificio .mp-esc{grid-template-columns:minmax(0,1fr)}
#v-mapa.vista-edificio .mp-lado{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;align-items:start}
#v-mapa.vista-edificio .mp-lado > h2,#v-mapa.vista-edificio .mp-lado > p{grid-column:1 / -1}
#v-mapa.vista-edificio .mp-lado > h2 + p{margin-top:-8px}
.mp-col{display:flex;flex-direction:column;gap:14px;min-width:0}
@media (max-width:700px){ #v-mapa.vista-edificio .mp-lado{grid-template-columns:1fr} }

.mp-lienzo{position:relative;border-radius:12px;overflow:hidden;background:var(--mp-oscuro);border:1px solid var(--filete);
  box-shadow:0 10px 30px rgba(18,22,28,.10)}
.mp-vista{position:relative;overflow:hidden}
.mp-vista img{display:block;width:100%;height:auto;max-width:100%;user-select:none;-webkit-user-drag:none}
/* La foto NUNCA es mas alta que la ventana. El render aereo mide 1351x1052:
   en una laptop de 768 px de alto salia de 780 y lo que va debajo —la
   leyenda, el panel del edificio— quedaba fuera de la vista. Con
   `object-fit:contain` la foto se encoge centrada, y el SVG de encima hace
   exactamente lo mismo (xMidYMid meet), asi que las zonas de toque siguen
   cuadrando. En telefono no aplica: ahi el cuadro se desplaza con el dedo. */
@media (min-width:701px){
  .mp-vista img{max-height:calc(100vh - 215px);object-fit:contain}
  #v-mapa.vista-edificio .mp-vista img{max-height:min(46vh,480px)}
}
.mp-vista svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mp-zoom{transform-origin:0 0;will-change:transform}
.mp-arrastrable{touch-action:pan-x pan-y pinch-zoom}
.mp-pie{position:absolute;left:12px;bottom:10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mp-claro);opacity:.85;background:rgba(11,18,32,.55);padding:4px 9px;border-radius:6px;pointer-events:none;z-index:2}
.mp-pie.der{left:auto;right:12px}
.mp-tip{position:absolute;pointer-events:none;background:var(--tinta);color:var(--papel);font-size:13px;line-height:1.35;
  padding:8px 11px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.3);transform:translate(-50%,calc(-100% - 14px));
  white-space:nowrap;z-index:4}
.mp-tip b{display:block;font-family:var(--mono);font-weight:500}
.mp-volver{position:absolute;left:12px;top:12px;z-index:3;background:rgba(11,18,32,.72);color:var(--mp-claro);border:0;
  padding:8px 13px;border-radius:999px;cursor:pointer;font:inherit;font-size:13px;min-height:34px;backdrop-filter:blur(4px)}
.mp-volver:hover{background:rgba(11,18,32,.9)}
.mp-cargando{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--mp-claro);
  background:rgba(11,18,32,.35);font-size:14px;z-index:3}

/* los botones de acercar */
.mp-zoom-botones{position:absolute;right:12px;top:12px;z-index:3;display:flex;flex-direction:column;gap:4px}
.mp-zoom-botones button{width:36px;height:36px;border:0;border-radius:8px;background:rgba(11,18,32,.72);color:var(--mp-claro);
  font:600 18px/1 var(--letra);cursor:pointer;backdrop-filter:blur(4px)}
.mp-zoom-botones button:hover{background:rgba(11,18,32,.92)}
.mp-zoom-botones button:disabled{opacity:.35;cursor:default}

/* huellas sobre el aéreo */
.mp-h .mp-hit{fill:transparent;stroke:none;cursor:pointer}
.mp-h.sinliberar .mp-hit{cursor:default}
.mp-h .mp-cuerpo{stroke-width:2.2;cursor:pointer;transition:fill-opacity .15s, stroke .15s}
.mp-h.disponible .mp-cuerpo{fill:var(--mp-disp);fill-opacity:.45;stroke:#d9f0e4}
.mp-h.reserva .mp-cuerpo{fill:var(--mp-res);fill-opacity:.45;stroke:#f6e6c8}
.mp-h.vendida .mp-cuerpo{fill:var(--mp-vend);fill-opacity:.45;stroke:#e4e7ec}
.mp-h.sinliberar .mp-cuerpo{fill:var(--mp-oscuro);fill-opacity:.12;stroke:var(--mp-claro);stroke-opacity:.5;stroke-dasharray:5 4;cursor:default}
.mp-h:hover .mp-cuerpo,.mp-h:focus-visible .mp-cuerpo{fill-opacity:.7;stroke:#ffffff;stroke-width:3;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.9))}
.mp-h.sinliberar:hover .mp-cuerpo{fill-opacity:.12;stroke-width:2.2;filter:none}
.mp-h:focus-visible{outline:none}
.mp-chapa circle{fill:rgba(11,18,32,.82);stroke:#ffffff;stroke-width:1.5}
.mp-h.disponible .mp-chapa circle{fill:var(--mp-disp)}
.mp-h.reserva .mp-chapa circle{fill:var(--mp-res)}
.mp-h.vendida .mp-chapa circle{fill:var(--mp-vend)}
.mp-chapa text{font:600 14px var(--mono);fill:#ffffff;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.mp-h.sinliberar .mp-chapa circle{fill:rgba(11,18,32,.55);stroke-opacity:.6}
.mp-h.sinliberar .mp-chapa text{opacity:.85;font-weight:400}
.mp-h.apagada .mp-cuerpo{fill-opacity:.08;stroke-opacity:.35}
.mp-h.apagada .mp-chapa{opacity:.35}

/* celdas sobre la fachada */
.mp-c .mp-cuerpo{stroke-width:2;cursor:pointer;transition:fill-opacity .15s}
.mp-c.disponible .mp-cuerpo{fill:var(--mp-disp);fill-opacity:.22;stroke:#d9f0e4}
.mp-c.reserva .mp-cuerpo{fill:var(--mp-res);fill-opacity:.22;stroke:#f6e6c8}
.mp-c.vendida .mp-cuerpo{fill:var(--mp-vend);fill-opacity:.26;stroke:#e4e7ec}
.mp-c:hover .mp-cuerpo,.mp-c:focus-visible .mp-cuerpo{fill-opacity:.5;stroke:#ffffff;stroke-width:3}
.mp-c:focus-visible{outline:none}
.mp-eti{pointer-events:none}
.mp-eti rect{fill:rgba(11,18,32,.78);stroke:rgba(255,255,255,.55);stroke-width:1.5}
.mp-c.disponible .mp-eti rect{fill:var(--mp-disp)}
.mp-c.reserva .mp-eti rect{fill:var(--mp-res)}
.mp-c.vendida .mp-eti rect{fill:var(--mp-vend)}
.mp-eti text{font:600 21px var(--letra);fill:#ffffff;text-anchor:middle;dominant-baseline:central;letter-spacing:.02em}
.mp-eti.grande rect{fill:rgba(28,79,124,.92);stroke:#ffffff;stroke-width:2}
.mp-eti.grande text{font:600 24px var(--letra);letter-spacing:.08em}
.mp-nivel{font:600 15px var(--letra);fill:var(--mp-claro);letter-spacing:.14em;paint-order:stroke;stroke:rgba(11,18,32,.75);stroke-width:5px}
.mp-velo{fill:rgba(251,251,250,.62)}
.mp-marco{fill:none;stroke:var(--marca);stroke-width:8}

.mp-leyenda{display:flex;gap:14px 22px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--tinta-2)}
.mp-leyenda span{display:inline-flex;align-items:center;gap:7px}
.mp-leyenda i{width:14px;height:14px;border-radius:50%;display:inline-block;border:1.5px solid transparent}
.mp-leyenda .d{background:var(--mp-disp);border-color:var(--mp-disp)}
.mp-leyenda .r{background:var(--mp-res);border-color:var(--mp-res)}
.mp-leyenda .v{background:var(--mp-vend);border-color:var(--mp-vend)}
.mp-leyenda .s{background:var(--mp-lib-suave);border-color:var(--mp-lib);border-style:dashed}

/* el lateral */
.mp-lado{background:#fff;border:1px solid var(--filete);border-radius:12px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:16px}
.mp-lado h2{margin:0;font-size:20px;line-height:1.2;text-wrap:balance}
.mp-lado h3{font:600 12px/1.3 var(--letra);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);margin:0}
.mp-lado p{margin:0;color:var(--tinta-2)}
.mp-lado .mp-peq{font-size:13px;color:var(--tinta-3)}
.mp-cifras{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--filete);border:1px solid var(--filete);border-radius:10px;overflow:hidden}
.mp-cifra{background:#fff;padding:11px 13px}
.mp-cifra .et{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
.mp-cifra .n{font:600 22px/1.15 var(--mono);margin-top:3px;font-variant-numeric:tabular-nums}
.mp-cifra .n.chico{font-size:16px}
.mp-cifra.d .n{color:var(--verde)} .mp-cifra.r .n{color:var(--ambar)} .mp-cifra.v .n{color:var(--mp-vend)}
.mp-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mp-lista li{border-top:1px solid var(--filete)}
.mp-lista li:first-child{border-top:0}
.mp-fila{width:100%;background:none;border:0;text-align:left;padding:9px 6px;cursor:pointer;display:grid;
  grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border-radius:8px;font:inherit;color:inherit;min-height:40px}
.mp-fila:hover{background:var(--marca-suave)}
.mp-fila .cod{font:500 14px var(--mono)}
.mp-fila .cnt{font-size:13px;color:var(--tinta-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.mp-barra{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--mp-lib-suave)}
.mp-barra i{display:block;height:100%}
.mp-barra .d{background:var(--verde)} .mp-barra .r{background:var(--ambar)} .mp-barra .v{background:var(--mp-vend)}
.mp-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.03em;align-self:flex-start}
.mp-pill.disponible{background:var(--verde-suave);color:var(--verde)}
.mp-pill.reserva{background:var(--ambar-suave);color:var(--ambar)}
.mp-pill.vendida{background:var(--mp-vend-suave);color:var(--mp-vend)}
.mp-conm{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;user-select:none;min-height:40px}
.mp-conm input{width:18px;height:18px;accent-color:var(--marca)}
.mp-etapas{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.mp-chip{border:1px solid var(--filete);background:#fff;border-radius:999px;padding:5px 11px;font-size:13px;color:var(--tinta-2)}
.mp-chip.on{background:var(--marca);color:#fff;border-color:var(--marca)}
.mp-chip.prox{color:var(--tinta-3);border-style:dashed}
.mp-chip.prox.on{background:var(--tinta-3);border-color:var(--tinta-3);color:#fff;border-style:solid}
button.mp-chip{cursor:pointer;font:inherit;font-size:13px;min-height:32px}
button.mp-chip:hover{border-color:var(--marca)}
.mp-filtros{margin-top:10px}
.mp-filtros > summary{display:none;list-style:none;cursor:pointer;font-weight:600;font-size:13px;color:var(--marca);min-height:40px;align-items:center}
.mp-filtros > summary::-webkit-details-marker{display:none}
@media (max-width:700px){ .mp-filtros > summary{display:inline-flex} }
.mp-filtro{display:flex;flex-direction:column;gap:2px}
.mp-filtro select{margin-top:8px;font:inherit;padding:8px 10px;border:1px solid var(--filete);border-radius:8px;background:#fff;min-height:40px}
.mp-quitar{align-self:flex-start;background:none;border:1px solid var(--filete);border-radius:999px;padding:6px 12px;
  font:inherit;font-size:13px;color:var(--marca);cursor:pointer;min-height:34px}
.mp-quitar:hover{background:var(--marca-suave)}
.mp-cumplen{font-size:13px;font-weight:600;color:var(--marca);background:var(--marca-suave);padding:8px 12px;border-radius:8px}
.mp-fila.apagada{opacity:.4}
.mp-c.apagada .mp-cuerpo{fill-opacity:.05;stroke-opacity:.3}
.mp-c.apagada .mp-eti{opacity:.35}
.mp-celda.apagada{opacity:.35}
.mp-uni{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.mp-uni div{display:flex;flex-direction:column;gap:2px}
.mp-uni .et{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
.mp-uni .v{font:500 16px var(--mono);font-variant-numeric:tabular-nums}
.mp-codigo{font:600 24px/1.1 var(--mono);letter-spacing:-.01em;word-break:break-all}
.mp-acciones{display:flex;flex-direction:column;gap:8px}
.mp-nota{font-size:12.5px;color:var(--tinta-3);border-left:3px solid var(--marca);padding-left:10px;line-height:1.45}
.mp-pisos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mp-celda{border:1px solid var(--filete);border-radius:8px;padding:8px 4px;text-align:center;cursor:pointer;background:#fff;font:inherit;color:inherit;min-height:40px}
.mp-celda:hover{border-color:var(--marca)}
.mp-celda b{display:block;font:500 13px var(--mono)}
.mp-celda i{display:block;width:100%;height:4px;border-radius:2px;margin-top:6px;background:var(--mp-lib)}
.mp-celda.disponible i{background:var(--verde)} .mp-celda.reserva i{background:var(--ambar)} .mp-celda.vendida i{background:var(--mp-vend)}
.mp-nivel-fila{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:center}
.mp-nivel-fila span{font-size:12px;letter-spacing:.08em;color:var(--tinta-3);text-transform:uppercase}

/* Teléfono: el cuadro se puede desplazar con el dedo y las vistas no se
   encogen hasta lo intocable. Un edificio de 20 px no se puede tocar. */
@media (max-width:700px){
  .mp-lienzo{overflow:auto;-webkit-overflow-scrolling:touch}
  .mp-vista{min-width:720px}
  .mp-zoom-botones{display:none}
}