/* PlanoObra: el plano «de papel» como el de Agora. Solo tokens; vale para los dos temas (la tarjeta es clara en ambos). */
.po { position: relative; background: var(--color-tarjeta); border-radius: inherit; overflow: hidden; touch-action: none; }
.po-svg { display: block; width: 100%; height: 100%; cursor: grab; user-select: none; -webkit-user-select: none; }
.po-svg.arrastrando { cursor: grabbing; }
/* Contexto del plano de Agora: tinta fina y tenue para que mande el color de los locales */
.po-cajones { fill: none; stroke: color-mix(in srgb, var(--color-tinta) 22%, transparent); stroke-width: .45; vector-effect: non-scaling-stroke; }
.po-banquetas { fill: none; stroke: color-mix(in srgb, var(--color-tinta) 42%, transparent); stroke-width: .9; vector-effect: non-scaling-stroke; }
.po-edificios { fill: none; stroke: color-mix(in srgb, var(--color-tinta) 55%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.po-soriana { fill: color-mix(in srgb, var(--color-tinta) 9%, var(--color-tarjeta)); stroke: color-mix(in srgb, var(--color-tinta) 55%, transparent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.po-ancla { font-family: var(--fuente-texto); font-weight: 800; font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; fill: color-mix(in srgb, var(--color-tinta) 60%, transparent); }
.po-calle { font-family: var(--fuente-texto); font-weight: 700; font-stretch: 125%; letter-spacing: .14em; fill: color-mix(in srgb, var(--color-tinta) 55%, transparent); }
/* Norte: fijo en la esquina, fuera del dibujo (no tapa calles ni locales al acercar o alejar) */
.po-norte { position: absolute; left: 12px; top: 12px; width: 44px; height: 44px; pointer-events: none; z-index: 1; }
.po-norte svg { display: block; width: 100%; height: 100%; }
@media (max-width: 760px) { .po-norte { width: 34px; height: 34px; left: 8px; top: 8px; } }
.po-norte circle { fill: var(--color-tarjeta); stroke: var(--color-borde-campo, var(--color-tinta)); stroke-width: 2; }
.po-norte path { fill: var(--color-tinta); }
.po-norte text { font: 700 26px var(--fuente-cifra); fill: var(--color-tinta); }
/* Locales: el color del estado manda */
.po-local { stroke: var(--color-tinta); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; transition: opacity 250ms ease, fill-opacity 150ms ease; }
.po-local:hover { fill-opacity: .82; }
.po-local:focus-visible { outline: none; stroke: var(--color-tinta); stroke-width: 3; stroke-dasharray: 6 3; }
.po-local.fuera { opacity: .38; }
.po-local.dentro { stroke-width: 1.8; }
/* Elegido: contorno grueso de tinta con halo claro. Se distingue sobre todos los estados (también sobre el verde oscuro
   de rentado y el azul de «en firma»): el azul es solo «en firma», nunca la marca del elegido. */
.po-local.yo { stroke: var(--color-tinta); stroke-width: 3.5; filter: drop-shadow(0 0 1.5px var(--color-tarjeta)) drop-shadow(0 0 1.5px var(--color-tarjeta)) drop-shadow(0 0 1px var(--color-tarjeta)); }
.po-local.e-disponible { fill: var(--color-disponible-suave); stroke: var(--color-disponible-texto); }
[data-tema='showroom'] .po-local.e-disponible { fill: var(--color-disponible); }
.po-local.e-apartado { fill: var(--color-apartado); }
.po-local.e-negociacion { fill: var(--color-negociacion-claro); }
.po-local.e-firma { fill: var(--color-firma); }
.po-local.e-arrendado { fill: var(--color-arrendado); }
.po-local.e-rentado { fill: color-mix(in srgb, var(--color-arrendado) 55%, var(--color-tarjeta)); }
.po-local.e-sin_dato { fill: var(--color-sin-dato-claro); stroke-dasharray: 4 3; }
/* Etiquetas como en el plano de rentas: número fuerte, marca en versalitas, m² en mono */
.po-etiquetas { pointer-events: none; transition: opacity 180ms ease; }
.po-et-num { font-family: var(--fuente-cifra); font-weight: 600; fill: var(--color-tinta); }
.po-et-marca { font-family: var(--fuente-texto); font-weight: 800; font-stretch: 112%; letter-spacing: .02em; text-transform: uppercase; fill: var(--color-tinta); }
.po-et-m2 { font-family: var(--fuente-cifra); font-weight: 500; fill: var(--color-tinta-suave); }
/* sobre verde oscuro (arrendado de la oficina) y azul (firma) el texto va claro */
.po-et-claro .po-et-num, .po-et-claro .po-et-marca, .po-et-claro .po-et-m2 { fill: var(--color-arrendado-texto); }
.po-controles { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; border: 1px solid var(--color-borde-campo); background: var(--color-tarjeta); }
.po-controles button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--color-tinta); cursor: pointer; }
.po-controles button + button { border-top: 1px solid var(--color-borde-campo); }
.po-controles button:hover { background: color-mix(in srgb, var(--color-tinta) 6%, var(--color-tarjeta)); }
.po-controles button:focus-visible { outline: 2px solid var(--color-enlace); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .po-local, .po-etiquetas { transition: none; } }
/* Oficina · Plano vivo: marco naranja = el contrato vence en 90 días o menos (opción claseExtra del módulo) */
.po-local.po-vence:not(.yo) { stroke: var(--color-vence); stroke-width: 3; }
.po-local.po-vence.fuera { stroke-width: 1.5; }