.plano-stage {
    position: relative;
    width: 100%;
    background: #f7f7f7;
    border: 1px solid var(--border, #e5e5e5);
    border-radius: 8px;
    overflow: hidden;
    touch-action: none;
    min-height: 320px;
}

.plano-stage .plano-content {
    position: relative;
    width: 100%;
    transform-origin: 0 0;
    --zoom: 1;
}

.plano-stage img.plano-image {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

.plano-stage .pin {
    position: absolute;
    /* Counter-scale so the pin keeps constant visual size at any zoom level */
    transform: translate(-50%, -100%) scale(calc(1 / var(--zoom, 1)));
    transform-origin: bottom center;
    pointer-events: auto;
    cursor: pointer;
}

.plano-stage .pin svg { width: 28px; height: 28px; display: block; }

.plano-stage .plano-popup {
    /* Popup also counter-scales so it stays readable when zoomed */
    transform: translate(-50%, -110%) scale(calc(1 / var(--zoom, 1)));
    transform-origin: bottom center;
}

.plano-stage .pin.estado-pendiente  { color: #f59e0b; }
.plano-stage .pin.estado-en_proceso { color: #3b82f6; }
.plano-stage .pin.estado-resuelta   { color: #22c55e; }
.plano-stage .pin.estado-resuelto   { color: #22c55e; }
.plano-stage .pin.no-validada       { opacity: 0.55; outline: 2px dashed #b91c1c; }

.plano-stage.marking { cursor: crosshair; }
.plano-stage.marking .pin { pointer-events: none; }

.plano-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 8px 0;
}
.plano-toolbar button { font-size: 0.85rem; }
.plano-toolbar .coord {
    margin-left: auto;
    color: var(--text-3, #6b7280);
    font-size: 0.8rem;
}

.plano-popup {
    position: absolute;
    background: white;
    border: 1px solid var(--border, #e5e5e5);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 10px;
    min-width: 200px;
    max-width: 280px;
    font-size: 0.85rem;
    z-index: 50;
}
.plano-popup .titulo { font-weight: 600; margin-bottom: 4px; }
.plano-popup .meta { color: var(--text-3, #6b7280); font-size: 0.75rem; }
.plano-popup a { color: var(--primary, #2563eb); }

/* ── Admin visual de asignación vivienda → plano ── */
:root {
    --tipo-A: #1f77b4; --tipo-B: #aec7e8;
    --tipo-C: #ff7f0e; --tipo-D: #ffbb78;
    --tipo-E: #2ca02c; --tipo-F: #98df8a;
    --tipo-G: #d62728; --tipo-H: #ff9896;
    --tipo-I: #9467bd; --tipo-J: #c5b0d5;
    --tipo-K: #8c564b; --tipo-L: #c49c94;
    --tipo-M: #e377c2; --tipo-N: #f7b6d2;
    --tipo-O: #7f7f7f; --tipo-P: #bcbd22;
}

.tipo-chip, .tipo-chip-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: white;
    font-weight: 700;
}
.tipo-chip { width: 32px; height: 32px; font-size: 0.9rem; }
.tipo-chip-large {
    width: 56px; height: 56px;
    font-size: 1.3rem;
    cursor: pointer;
    opacity: 0.35;
    transition: opacity 0.15s, outline 0.15s;
    border: none;
    padding: 0;
}
.tipo-chip-large.selected {
    opacity: 1;
    outline: 3px solid var(--text-1, #111);
    outline-offset: 2px;
}
.tipo-chip.tipo-A,       .tipo-chip-large.tipo-A       { background: var(--tipo-A); }
.tipo-chip.tipo-B,       .tipo-chip-large.tipo-B       { background: var(--tipo-B); }
.tipo-chip.tipo-C,       .tipo-chip-large.tipo-C       { background: var(--tipo-C); }
.tipo-chip.tipo-D,       .tipo-chip-large.tipo-D       { background: var(--tipo-D); }
.tipo-chip.tipo-E,       .tipo-chip-large.tipo-E       { background: var(--tipo-E); }
.tipo-chip.tipo-F,       .tipo-chip-large.tipo-F       { background: var(--tipo-F); }
.tipo-chip.tipo-G,       .tipo-chip-large.tipo-G       { background: var(--tipo-G); }
.tipo-chip.tipo-H,       .tipo-chip-large.tipo-H       { background: var(--tipo-H); }
.tipo-chip.tipo-I,       .tipo-chip-large.tipo-I       { background: var(--tipo-I); }
.tipo-chip.tipo-J,       .tipo-chip-large.tipo-J       { background: var(--tipo-J); }
.tipo-chip.tipo-K,       .tipo-chip-large.tipo-K       { background: var(--tipo-K); }
.tipo-chip.tipo-L,       .tipo-chip-large.tipo-L       { background: var(--tipo-L); }
.tipo-chip.tipo-M,       .tipo-chip-large.tipo-M       { background: var(--tipo-M); }
.tipo-chip.tipo-N,       .tipo-chip-large.tipo-N       { background: var(--tipo-N); }
.tipo-chip.tipo-O,       .tipo-chip-large.tipo-O       { background: var(--tipo-O); }
.tipo-chip.tipo-P,       .tipo-chip-large.tipo-P       { background: var(--tipo-P); }

.viviendas-filtros {
    display: flex; gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.viviendas-filtros .filtro {
    padding: 6px 14px;
    border: 1px solid var(--border, #e5e5e5);
    border-radius: 20px;
    background: white;
    color: var(--text-1, #111);
    text-decoration: none;
    font-size: 0.85rem;
}
.viviendas-filtros .filtro.active {
    background: var(--text-1, #111);
    color: white;
    border-color: var(--text-1, #111);
}

.vivienda-row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, #e5e5e5);
    text-decoration: none;
    color: var(--text-1, #111);
}
.vivienda-row:hover { background: var(--surface, #fafafa); }
.vivienda-row .num { font-weight: 700; font-size: 1.05rem; min-width: 60px; }
.vivienda-row .estado { color: var(--text-3, #6b7280); font-size: 0.85rem; }
.vivienda-row .estado.conf { color: #16a34a; font-weight: 500; }
.vivienda-row .chev {
    margin-left: auto;
    color: var(--text-3, #6b7280);
    font-size: 1.2rem;
}

.chips-row {
    display: flex; gap: 8px;
    overflow-x: auto;
    padding: 4px 0 12px 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.chips-row .tipo-chip-large {
    scroll-snap-align: start;
    flex-shrink: 0;
}