/* El plano de lotes (unidad 002). Los colores salen de la clase que pone el servidor en cada
   lote: sin JavaScript el plano se ve igual de pintado; el JS solo añade el zoom. */

.plano-marco {
    position: relative;
    overflow: hidden;
    border: 1px solid #e3ded4;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

.plano {
    display: block;
    width: 100%;
    height: auto;
}

.plano .vias { fill: #ebe6dd; stroke: #a39b8f; stroke-width: 3; }
.plano .verde { fill: #d6e6c6; }
.plano .lago { fill: #c9e1ea; }
.plano .empresa { fill: #ddd6cb; }
.plano .clubhouse path { fill: #e6d7c8; }

.plano .lote path { stroke: #fff; stroke-width: 2; }
.plano .lote--disponible path { fill: #34d399; }
.plano .lote--vendido path { fill: #a8a29e; }
.plano .lote--casa path { fill: #f59e0b; }
.plano .lote:hover path,
.plano .lote:focus-visible path { stroke: #9c4a2c; stroke-width: 5; }

.plano text {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
    fill: #1c1917;
}
.plano .rotulo { font-size: 20px; font-weight: 600; fill: #6b665e; }
.plano .rotulo-casa { font-size: 20px; fill: #9c4a2c; }

/* Abajo a la izquierda: a escala 1 esa esquina del plano está vacía, y arriba a la derecha
   los botones tapaban el lote 27 en el celular. */
.plano-botones {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    display: flex;
    gap: 0.375rem;
}
.plano-botones button {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #e3ded4;
    border-radius: 9999px;
    background: #fff;
    color: #1c1917;
    font-size: 1.5rem;
    line-height: 1;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
}
.plano-botones button[hidden] { display: none; }

.plano-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: #6b665e;
}
.plano-leyenda li { display: flex; align-items: center; gap: 0.4rem; }
.muestra { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 0.2rem; }
.muestra--disponible { background: #34d399; }
.muestra--vendido { background: #a8a29e; }
.muestra--casa { background: #f59e0b; }

/* Tocar un lote baja a su fila de la tabla, que queda resaltada (también sin JS). */
tr[id^="fila-"] { scroll-margin-top: 1rem; }
tr:target { background-color: #fef3c7; }