/* viewer360.css — painel do Visualizador 360° */

#viewer360Panel {
  position: fixed;
  left: 120px; top: 90px;
  width: 820px; height: 560px;
  min-width: 480px; min-height: 360px;
  background: #fff;
  border: 1px solid #c4d2e0;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .28);
  display: flex; flex-direction: column;
  z-index: 1200;
  overflow: hidden;
}

#viewer360Panel .modal-header {
  display: flex; align-items: center; gap: 10px;
  background: #003b73; color: #fff;
  padding: 8px 12px; cursor: move;
  font-weight: 600;
}
#viewer360Panel .v360-label {
  font-weight: 400; font-size: 12px; opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}
#viewer360Panel .modal-close-btn {
  background: transparent; border: 0; color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
}

.v360-body {
  flex: 1; display: flex; min-height: 0;
}
.v360-pano {
  flex: 1; min-width: 0; background: #111; position: relative;
}
#v360svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

/* Em modo de medição: troca a mãozinha do Pannellum por um ponto azul */
#pano360.measuring, #pano360.measuring * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='9' cy='9' r='5' fill='%231763ff' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 9 9, crosshair !important;
}
#v360svg text { font: 600 13px system-ui, Arial; fill: #fff; paint-order: stroke; stroke: #003b73; stroke-width: 3px; }
.v360-side {
  width: 240px; display: flex; flex-direction: column;
  border-left: 1px solid #dce5ee; background: #f7fafc;
}
.v360-inset {
  height: 200px; width: 100%; background: #dde;
  border-bottom: 1px solid #dce5ee;
}
.v360-info {
  padding: 10px 12px; font-size: 12px; color: #334; line-height: 1.55;
  overflow: auto; flex: 1;
}

.v360-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-top: 1px solid #dce5ee; background: #eef3f8;
}
.v360-toolbar button {
  background: #1763a6; color: #fff; border: 0; border-radius: 5px;
  padding: 6px 12px; cursor: pointer; font-size: 13px;
}
.v360-toolbar button:hover { background: #11528c; }
.v360-status { margin-left: auto; font-size: 12px; font-weight: 600; }

.v360-measbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 12px; border-top: 1px solid #dce5ee; background: #f4f8fc;
}
.v360-measbar button {
  background: #2c7; color: #fff; border: 0; border-radius: 5px;
  padding: 5px 10px; cursor: pointer; font-size: 12px;
}
.v360-measbar button:hover { filter: brightness(.95); }
.v360-measbar button.on { background: #d35400; box-shadow: 0 0 0 2px rgba(211,84,0,.3); }
.v360-measbar label { font-size: 11px; color: #345; display: flex; align-items: center; }
.v360-measbar input { width: 56px; font-size: 12px; padding: 2px 4px; }
.v360-measout { font-size: 12px; font-weight: 600; color: #003b73; flex: 1; min-width: 140px; }

#viewer360Panel .modal-resize-grip {
  position: absolute; right: 2px; bottom: 2px;
  width: 14px; height: 14px; cursor: se-resize;
  background: linear-gradient(135deg, transparent 50%, #9bb3c9 50%);
}

/* Campo de altura da câmera (calibração de escala da medição) */
.v360-camh {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px; font-size: 12px; color: #34495e; white-space: nowrap;
}
.v360-camh input {
  width: 3.6em; padding: 2px 4px; font-size: 12px;
  border: 1px solid #b9c6d3; border-radius: 4px;
}