/* The screen layout is independent of the world's transformed dimensions. */
#app.wrap {
  width:100%; max-width:none; height:calc(100dvh - 86px); margin:14px 0;
  grid-template-columns:minmax(0,1fr) 340px; align-items:stretch;
}
#app > .office-card {
  min-width:0; min-height:0; display:flex; flex-direction:column;
}
#app > .office-card > .zoom-hint { flex:none; align-self:flex-start; }
#app > .office-card > .help { flex:none; }
#app > .office-sidebar {
  min-width:0; min-height:0; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; scrollbar-gutter:stable;
}
#officeViewport {
  position:relative; width:100%; min-width:0; height:auto; min-height:0;
  flex:1 1 0; overflow:auto; overscroll-behavior:contain;
  overflow-anchor:none; scroll-behavior:auto;
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
#officeZoomLayer {
  /* Clip the unscaled layout box. Only its scaled footprint is scrollable. */
  position:relative; overflow:hidden; overflow-anchor:none;
}
#officeZoomLayer > #office { position:absolute; left:0; top:0; }
.map-stage { position:relative; min-height:0; min-width:0; flex:1 1 0; display:flex; }
.map-stage #officeViewport { height:100%; }
.map-navigation { position:absolute; right:24px; bottom:22px; z-index:20; display:grid; gap:5px; }
.map-navigation button { width:34px; height:34px; display:grid; place-items:center; padding:6px; color:#34483c; background:#fff; border:1px solid #b3bbb1; border-radius:7px; box-shadow:0 2px 8px #0003; cursor:pointer; }
.map-navigation button:hover { background:#eef5eb; }
.map-navigation button:disabled { opacity:.5; cursor:not-allowed; }
.map-navigation svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.map-navigation button.follow-stop { color:#9b1717; background:#fff5f5; border-color:#d9a3a3; }
.map-navigation button.follow-stop:hover { background:#ffeaea; }

/* v6: durante seguimiento los controles deben quedar por encima de cámaras/pantalla (media full z-index 5000). */
.map-navigation:has(#stopFollowing:not([hidden])) { z-index:6100; }
.follow-banner:not([hidden]) { z-index:6101; }

.follow-banner {
  position:absolute; left:12px; top:12px; z-index:21;
  display:flex; align-items:center; gap:12px;
  min-width:min(440px, calc(100% - 110px)); max-width:min(540px, calc(100% - 110px));
  padding:10px 12px; border-radius:10px;
  background:rgba(255,250,236,.96); border:2px solid #e2d04f;
  box-shadow:0 8px 18px rgba(0,0,0,.14); color:#3e4324;
}
.follow-banner-copy { display:flex; flex-direction:column; min-width:0; }
.follow-banner-copy strong { font-size:14px; line-height:1.2; }
.follow-banner-copy span { font-size:12px; line-height:1.3; opacity:.9; }
.follow-banner-stop {
  flex:none; white-space:nowrap; cursor:pointer;
  padding:8px 11px; border-radius:8px; border:1px solid #d9a3a3;
  background:#fff5f5; color:#8a1f1f; font-weight:700;
}
.follow-banner-stop:hover { background:#ffeaea; }
.follow-banner[hidden] { display:none !important; }

.map-notice { position:absolute; bottom:22px; left:12px; right:72px; z-index:20; width:fit-content; max-width:calc(100% - 90px); padding:8px 12px; border-radius:7px; background:#263e32ed; color:white; font-size:12px; pointer-events:none; }
.desk-mini-zones { position:absolute; left:0; top:0; z-index:4; pointer-events:none; }
.desk-mini-zone { display:none; }
.desk-mini-zone.active { display:inline; fill:#ffffff0a; stroke:#ffffff24; stroke-width:1; }
.map-destination { position:absolute; width:18px; height:18px; border:2px solid #fff; border-radius:50%; background:#34483c66; box-shadow:0 0 0 1px #34483c80; transform:translate(-50%,-50%); z-index:8; pointer-events:none; }
.touch-map-hint { display:none; }
@media(pointer:coarse) {
  .mouse-map-hint { display:none; }
  .touch-map-hint { display:inline; }
}
@media(max-width:950px) and (min-width:701px) {
  #app.wrap { grid-template-columns:minmax(0,1fr) 300px; gap:10px; }
}
@media(max-width:700px) {
  #app.wrap { height:auto; grid-template-columns:minmax(0,1fr); }
  #app > .office-card { height:65dvh; min-height:320px; }
  #app > .office-sidebar { max-height:70dvh; }
  .follow-banner { left:10px; right:86px; min-width:0; max-width:none; padding:9px 10px; gap:8px; }
  .follow-banner-copy strong { font-size:13px; }
  .follow-banner-copy span { font-size:11px; }
  .follow-banner-stop { padding:7px 9px; font-size:12px; }
}