/* Plano del predio: lo usan la página del food park, la ficha del dashboard y el editor. */
.sitemap { --sm-ground: #FBFAF8; --sm-zone: #E8E5E0; --sm-dash: #CFC9C1; --sm-ink: #67635E; --sm-accent: #C8341B; --sm-pin: clamp(22px, 4.6cqw, 34px); --sm-icon: clamp(20px, 3.8cqw, 28px);
  position: relative; width: 100%; container-type: inline-size; overflow: hidden; border-radius: 16px; background: var(--sm-ground); -webkit-user-select: none; user-select: none; }
.sm-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.sm-zone { position: absolute; display: grid; place-items: center; padding: 4px; overflow: hidden; border-radius: clamp(6px, 1.8cqw, 14px); background: var(--sm-zone); color: var(--sm-ink); text-align: center; }
.sm-zone span { font-size: clamp(8px, 1.9cqw, 14px); line-height: 1.2; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.sm-zone.is-dash { background: transparent; border: 1.5px dashed var(--sm-dash); }
.sitemap.has-image .sm-zone { background: rgb(255 255 255 / 70%); color: #2b2926; }
.sitemap.has-image .sm-zone.is-dash { background: transparent; border-color: rgb(19 19 19 / 45%); }
.sm-pin { position: absolute; z-index: 2; display: grid; justify-items: center; gap: 3px; color: inherit; text-decoration: none; transform: translate(-50%, -50%); }
.sm-pin b { display: grid; place-items: center; width: var(--sm-pin); height: var(--sm-pin); border-radius: 50%; background: var(--sm-accent); color: #fff; font-size: clamp(10px, 2cqw, 14px); font-weight: 700; line-height: 1; box-shadow: 0 0 0 3px #fff, 0 2px 6px rgb(0 0 0 / 18%); transition: transform .25s; }
a.sm-pin:hover b, a.sm-pin:focus-visible b { transform: scale(1.15); }
a.sm-pin:focus-visible { outline: none; }
a.sm-pin:focus-visible b { outline: 2px solid #131313; outline-offset: 4px; }
/* La etiqueta de un punto se acomoda hacia adentro cerca de los bordes; el ícono queda sobre el punto. */
.sm-pin.is-point { --tx: -50%; --ty: calc(var(--sm-icon) / -2); transform: translate(var(--tx), var(--ty)); }
.sm-pin.is-point.is-low { --ty: calc(-100% + var(--sm-icon) / 2); }
.sm-pin.is-point.is-low small { order: -1; }
.sm-pin.is-point.is-left { --tx: calc(var(--sm-icon) / -2); justify-items: start; }
.sm-pin.is-point.is-right { --tx: calc(-100% + var(--sm-icon) / 2); justify-items: end; }
.sitemap .sm-ic { width: var(--sm-icon); height: var(--sm-icon); padding: clamp(3px, .8cqw, 5px); border-radius: 50%; background: #fff; color: #131313; fill: currentColor; box-shadow: 0 1px 4px rgb(0 0 0 / 20%); }
.sm-pin small { padding: 1px 6px; border-radius: 999px; background: rgb(255 255 255 / 90%); color: #131313; font-size: clamp(9px, 1.6cqw, 12px); line-height: 1.3; white-space: nowrap; }
.sm-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sm-legend > * { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 5px; border-radius: 999px; background: var(--sm-ground, #FBFAF8); color: inherit; text-decoration: none; }
.sm-legend b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #C8341B; color: #fff; font-size: 12px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .sm-pin b { transition: none; } }