/* "Estrutura e plantas" (assets/structure-plans.js). Used in the customer area and in the backoffice.
   Spacing follows the product rules: explicit px gaps (12px between actions, 8px icon-to-label, 8px title-to-first-control, 24px between groups). */

.sp-host {
  display: block;
}

.sp-root {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--gray-800, #3c4043);
  font-size: 14px;
}

.sp-root--loading {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity var(--transition, 150ms ease);
}

/* The card grid and the open map are siblings, so the preview iframe can stay mounted while the cards are on screen. */
.sp-root > [data-sp-chrome],
.sp-root > [data-sp-grid],
.sp-root > [data-sp-workspace] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.sp-root > [data-sp-grid][hidden],
.sp-root > [data-sp-workspace][hidden] {
  display: none;
}

.sp-root .material-icons,
.sp-dialog .material-icons {
  font-size: 18px;
  flex: 0 0 auto;
}

.sp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sp-muted {
  color: var(--gray-600, #80868b);
}

.sp-hint {
  margin: 0;
  color: var(--gray-700, #5f6368);
  font-size: 12.5px;
  line-height: 1.4;
}

.sp-code {
  display: block;
  margin-top: 4px;
  color: var(--gray-600, #80868b);
  font-size: 12px;
}

/* ---------------------------------------------------------------- toolbar */

.sp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}

.sp-toolbar-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  min-width: 0;
}

.sp-toolbar-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--gray-900, #202124);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.sp-toolbar-title .material-icons {
  font-size: 20px;
}

.sp-client-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.sp-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.sp-place-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sp-place-picker .sp-label {
  white-space: nowrap;
}

.sp-place-picker select {
  width: auto;
  min-width: 150px;
  max-width: 240px;
  min-height: 32px;
  padding: 4px 8px;
  font-size: 13px;
}

.sp-place-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: 13px;
}

/* ---------------------------------------------------------------- form controls */

.sp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sp-field--inline {
  min-width: 200px;
}

.sp-field--wide {
  grid-column: 1 / -1;
}

.sp-label {
  color: var(--gray-700, #5f6368);
  font-size: 12px;
  font-weight: 500;
}

.sp-root input:not([type="checkbox"]):not([type="radio"]),
.sp-root select,
.sp-dialog input:not([type="checkbox"]):not([type="radio"]),
.sp-dialog select,
.sp-dialog textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--gray-300, #dadce0);
  border-radius: var(--radius-sm, 4px);
  background: var(--white, #fff);
  color: var(--gray-900, #202124);
  font: inherit;
}

.sp-dialog textarea {
  resize: vertical;
}

.sp-root input:focus,
.sp-root select:focus,
.sp-dialog input:focus,
.sp-dialog select:focus,
.sp-dialog textarea:focus {
  outline: 2px solid var(--primary, #1a73e8);
  outline-offset: 0;
  border-color: var(--primary, #1a73e8);
}

.sp-field-error {
  color: var(--danger, #ea4335);
  font-size: 12px;
}

.sp-check,
.sp-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.sp-check input,
.sp-radio input {
  width: auto;
  min-height: 0;
  margin: 0;
}

.sp-inline-select {
  min-width: 150px;
}

.sp-inline {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sp-inline select {
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------- alerts, chips, notes */

.sp-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--gray-300, #dadce0);
  border-radius: var(--radius-md, 8px);
  background: var(--gray-50, #f8f9fa);
}

.sp-alert-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sp-alert--error {
  border-color: #f5c6c2;
  background: #fdecea;
  color: #8c1d18;
}

.sp-alert--warn {
  border-color: #f5dd9e;
  background: #fef7e0;
  color: #6b4e00;
}

.sp-alert--info {
  border-color: #c6dafc;
  background: var(--primary-light, #e8f0fe);
  color: #174ea6;
}

.sp-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 13px;
}

.sp-note--warn {
  color: #6b4e00;
}

.sp-note--muted {
  color: var(--gray-700, #5f6368);
}

.sp-note--info {
  color: #174ea6;
}

.sp-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--gray-100, #f1f3f4);
  color: var(--gray-800, #3c4043);
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.sp-chip--ok {
  background: #e6f4ea;
  color: #137333;
}

.sp-chip--warn {
  background: #fef7e0;
  color: #8a5a00;
}

.sp-chip--info {
  background: var(--primary-light, #e8f0fe);
  color: #174ea6;
}

.sp-chip--muted {
  background: var(--gray-100, #f1f3f4);
  color: var(--gray-700, #5f6368);
}

/* A chip that is a link to the plan of a map: icon and label keep 8px apart. */
.sp-chip--link {
  gap: 8px;
  text-decoration: none;
}

.sp-chip--link:hover,
.sp-chip--link:focus-visible {
  text-decoration: underline;
}

.sp-chip--link .material-icons {
  font-size: 16px;
}

/* "Planta" column: plan chips and the send button wrap with room between them. */
.sp-plan-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

/* Toolbar: "Sincronizado às HH:MM" (icon + text). */
.sp-sync-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-700, #5f6368);
  font-size: 13px;
}

.sp-sync-state .material-icons {
  font-size: 18px;
}

/* Why the sync left a map for a person: icon + text. */
.sp-legacy-reason {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--gray-700, #5f6368);
  font-size: 12px;
}

.sp-legacy-reason .material-icons {
  font-size: 16px;
}

.sp-chip-x {
  margin-left: 4px;
  padding: 0 4px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.sp-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--gray-700, #5f6368);
}

/* ---------------------------------------------------------------- sections and summary */

.sp-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sp-pending-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.sp-unit-jump {
  min-width: 180px;
  max-width: 100%;
}

.sp-section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900, #202124);
}

.sp-subtitle {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800, #3c4043);
}

.sp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.sp-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--gray-200, #e8eaed);
  border-radius: var(--radius-md, 8px);
  background: var(--white, #fff);
}

.sp-card-value {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}

.sp-card-label {
  color: var(--gray-700, #5f6368);
  font-size: 12px;
}

.sp-card--ok .sp-card-value {
  color: #137333;
}

.sp-card--warn .sp-card-value {
  color: #b06000;
}

.sp-card--muted .sp-card-value {
  color: var(--gray-600, #80868b);
}

/* ---------------------------------------------------------------- pendings */

.sp-pending-list,
.sp-legacy-list,
.sp-bp-list,
.sp-file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-pending {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 12px;
  border: 1px solid var(--gray-200, #e8eaed);
  border-left-width: 3px;
  border-radius: var(--radius-sm, 4px);
  background: var(--white, #fff);
}

.sp-pending--client {
  border-left-color: #f9ab00;
}

.sp-pending--shared {
  border-left-color: var(--primary, #1a73e8);
}

.sp-pending--zapt {
  border-left-color: var(--gray-400, #bdc1c6);
}

.sp-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sp-link:hover strong {
  color: var(--primary, #1a73e8);
}

.sp-review-list { display: grid; gap: 10px; margin-bottom: 16px; max-height: 35vh; overflow: auto; }
.sp-review-item { border: 1px solid var(--gray-300, #dadce0); border-radius: 10px; padding: 12px; }
.sp-review-item p, .sp-review-item li { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- units */

.sp-units {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp-unit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--gray-300, #dadce0);
  border-radius: 12px;
  background: var(--white, #fff);
  min-width: 0;
  box-shadow: 0 2px 8px rgba(35, 52, 76, 0.04);
}

.sp-unit--excluded {
  background: var(--gray-50, #f8f9fa);
  border-style: dashed;
}

.sp-unit-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sp-unit-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sp-unit-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  color: var(--sp-unit-color, #355ca8);
  background: color-mix(in srgb, var(--sp-unit-color, #355ca8) 12%, white);
}

.sp-unit-symbol .material-icons { font-size: 21px; }
.sp-unit-edit { color: var(--gray-700, #5f6368); }

.sp-unit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--gray-900, #202124);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.sp-unit-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  color: var(--gray-700, #5f6368);
  font-size: 13px;
}

.sp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.sp-public-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
}

.sp-list-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* ---------------------------------------------------------------- tables */

.sp-table-wrap {
  overflow-x: auto;
}

.sp-preview {
  max-height: 260px;
  overflow-y: auto;
}

.sp-table {
  width: 100%;
  border-collapse: collapse;
}

.sp-table th,
.sp-table td {
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid var(--gray-200, #e8eaed);
  text-align: left;
  vertical-align: middle;
}

.sp-table th {
  color: var(--gray-700, #5f6368);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.sp-table .sp-short {
  margin-left: 8px;
}

.sp-row-skip td {
  color: var(--gray-500, #9aa0a6);
}

.sp-actions-cell {
  width: 1%;
  white-space: nowrap;
}

.sp-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sp-row-actions .btn-icon {
  width: 32px;
  height: 32px;
}

/* ---------------------------------------------------------------- blueprints, legacy, files */

.sp-bp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--gray-200, #e8eaed);
  border-radius: var(--radius-sm, 4px);
}

.sp-bp-main {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.sp-bp-main a {
  color: var(--primary, #1a73e8);
  word-break: break-word;
}

.sp-bp-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.sp-legacy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 12px;
  border: 1px solid var(--gray-200, #e8eaed);
  border-radius: var(--radius-sm, 4px);
}

.sp-legacy-map,
.sp-legacy-origin {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sp-legacy-origin-label {
  color: var(--gray-600, #80868b);
  font-size: 12px;
}

.sp-file-list {
  max-height: 220px;
  overflow-y: auto;
}

.sp-radio {
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- dialog */

.sp-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(32, 33, 36, 0.5);
}

.sp-dialog {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(640px, 100%);
  max-height: calc(100vh - 32px);
  border-radius: var(--radius-lg, 12px);
  background: var(--white, #fff);
  box-shadow: var(--shadow-lg);
  color: var(--gray-800, #3c4043);
  font-size: 14px;
}

.sp-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-200, #e8eaed);
}

.sp-dialog-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.sp-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px 16px;
  overflow-y: auto;
}

.sp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sp-fieldset {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--gray-200, #e8eaed);
  border-radius: var(--radius-sm, 4px);
  max-height: 180px;
  overflow-y: auto;
}

.sp-tabs {
  display: flex;
  gap: 12px;
  border-bottom: 1px solid var(--gray-200, #e8eaed);
}

.sp-tab {
  padding: 8px 4px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--gray-700, #5f6368);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.sp-tab.is-active {
  border-bottom-color: var(--primary, #1a73e8);
  color: var(--primary, #1a73e8);
}

.sp-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 4px;
}

/* ---------------------------------------------------------------- setup summary card (customer area) */

.sp-setup-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
  padding: 12px 16px;
  border: 1px solid var(--gray-200, #e8eaed);
  border-radius: var(--radius-md, 8px);
  background: var(--white, #fff);
}

.sp-setup-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sp-setup-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.sp-setup-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-setup-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sp-setup-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  font-size: 13px;
}

.sp-setup-muted {
  margin: 0;
  color: var(--gray-700, #5f6368);
  font-size: 12.5px;
}

/* ---------------------------------------------------------------- narrow screens */

@media (max-width: 720px) {
  .sp-toolbar {
    align-items: stretch;
  }

  .sp-toolbar-actions {
    width: 100%;
    margin-left: 0;
  }

  .sp-client-picker,
  .sp-field--inline,
  .sp-unit-jump {
    width: 100%;
    min-width: 0;
  }

  .sp-inline-select {
    min-width: 0;
    max-width: 100%;
  }

  .sp-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-pending {
    flex-direction: column;
    align-items: flex-start;
  }

  .sp-dialog {
    max-height: calc(100vh - 16px);
  }

  .sp-overlay {
    align-items: flex-end;
    padding: 8px;
  }

  .sp-dialog-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Floor table: each row becomes a small card, labelled by data-label. */
  .sp-table-wrap {
    overflow-x: visible;
  }

  .sp-unit .sp-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .sp-unit .sp-table,
  .sp-unit .sp-table tbody,
  .sp-unit .sp-table tr,
  .sp-unit .sp-table td {
    display: block;
  }

  .sp-unit .sp-table tr {
    margin-bottom: 8px;
    padding: 8px 12px;
    border: 1px solid var(--gray-200, #e8eaed);
    border-radius: var(--radius-sm, 4px);
  }

  .sp-unit .sp-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border-bottom: none;
  }

  .sp-unit .sp-table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--gray-600, #80868b);
    font-size: 12px;
  }

  .sp-unit .sp-table .sp-actions-cell {
    width: auto;
    justify-content: flex-end;
  }
}

.sp-review-queue ul { display: grid; gap: 8px; list-style: none; padding: 0; }
.sp-queue-item { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; padding: 10px; border: 1px solid #dadce0; border-radius: 8px; background: white; text-align: left; cursor: pointer; }

.sp-grid-section { margin: 8px 0 16px; }
.sp-grid-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 14px; }
.sp-grid-intro-text { min-width: 240px; flex: 1 1 280px; }
.sp-grid-intro h2, .sp-workspace-header h2 { margin: 0; color: #142846; font-size: 23px; letter-spacing: -.025em; }
.sp-grid-intro p { color: #667791; margin: 4px 0 0; }
.sp-building-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sp-building-card { overflow: hidden; border: 1px solid #e0e8f1; border-radius: 16px; background: #fff; box-shadow: 0 4px 18px rgba(26,49,84,.07); }
.sp-building-image { width: 100%; height: 145px; display: block; padding: 0; border: 0; border-top: 5px solid var(--sp-card-color); background: #edf3fa; cursor: pointer; overflow: hidden; }
.sp-building-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.sp-card-visual-empty { display: grid; place-items: center; height: 100%; color: var(--sp-card-color); background: linear-gradient(135deg,#f1f6fc,#e1eaf4); }
.sp-card-visual-empty .material-icons { font-size: 60px; opacity: .65; }
.sp-building-info { padding: 16px; }
.sp-building-title { display: flex; gap: 8px; align-items: center; color: #172b4d; font-size: 16px; }
.sp-building-title strong { overflow-wrap: anywhere; }
.sp-building-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sp-card-color); flex: none; }
.sp-building-meta { color: #667791; font-size: 13px; margin: 8px 0; }
.sp-building-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #667791; font-size: 12px; }
.sp-explore { display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 8px; padding: 8px 11px; color: #2757be; background: #edf3ff; cursor: pointer; font-weight: 600; }
.sp-explore .material-icons { font-size: 17px; }
.sp-workspace { margin: 22px 0; } .sp-workspace-breadcrumb { display: flex; align-items: center; gap: 10px; color: #667791; }
.sp-workspace-header { display: flex; align-items: center; gap: 12px; margin: 20px 0; } .sp-workspace-type { color:#74839b; font-size:12px; }
.sp-workspace-layout { display: grid; grid-template-columns: 175px minmax(0,1fr) 250px; gap: 14px; align-items: stretch; }
.sp-floor-nav,.sp-map-panel,.sp-review-panel { background: white; border: 1px solid #e1e8f1; border-radius: 14px; padding: 16px; min-width: 0; }
.sp-floor-nav h3,.sp-review-panel h3 { margin: 0 0 14px; color:#203454; font-size:15px; } .sp-floor-nav>div { max-height: 530px; overflow:auto; }
.sp-workspace-floor { display:flex; gap:8px; align-items:center; width:100%; border:0; background:transparent; text-align:left; padding:9px; border-radius:8px; color:#4a5c76; cursor:pointer; }
.sp-workspace-floor .material-icons {font-size:17px} .sp-workspace-floor.is-selected { background:#eaf1ff; color:#255cc2; font-weight:600; }
.sp-map-panel-head strong,.sp-map-panel-head span { display:block; } .sp-map-panel-head span { color:#73829a; font-size:12px; margin-top:4px; }
.sp-map-placeholder { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; min-height:370px; margin-top:12px; border-radius:10px; background:#edf3f9; color:#647590; text-align:center; padding:20px; }
.sp-map-placeholder img { width:100%; max-height:220px; object-fit:cover; border-radius:8px; } .sp-map-placeholder>.material-icons {font-size:58px; opacity:.55}
.sp-review-panel p {color:#6e7d91; line-height:1.5; font-size:13px} .sp-workspace-details { margin:24px 0; } .sp-workspace-details>summary {cursor:pointer; color:#425a7c; padding:12px 0;}
@media (max-width: 900px) { .sp-workspace-layout { grid-template-columns: 140px minmax(0,1fr); } .sp-review-panel { grid-column:1 / -1; } }
@media (max-width: 560px) { .sp-workspace-layout { grid-template-columns:1fr; } .sp-floor-nav>div { display:flex; gap:4px; overflow:auto; } .sp-workspace-floor { min-width:max-content; } .sp-review-panel {grid-column:auto;} .sp-map-placeholder {min-height:250px;} }
.sp-inline-review-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.sp-review-panel textarea { width:100%; min-height:120px; box-sizing:border-box; }
.sp-review-panel .sp-review-list { max-height:220px; overflow:auto; }

.sp-map-frame { display:block; width:100%; min-height:500px; border:0; margin-top:12px; border-radius:10px; background:#edf3f9; }
.sp-map-panel-head {display:flex; justify-content:space-between; gap:10px;} .sp-map-picker {display:flex; flex-direction:column; gap:4px; font-size:12px;}

@media (max-width: 1250px) { .sp-building-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .sp-building-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sp-building-grid { grid-template-columns: 1fr; } }

/* Workspace: preserve space for the map while keeping floor navigation one click away. */
.sp-workspace { margin: 4px 0 12px; }
.sp-workspace-header { margin: 8px 0 10px; }
.sp-workspace-header h2 { font-size: 20px; }
.sp-workspace-breadcrumb { gap: 12px; }
.sp-floor-nav,.sp-map-panel,.sp-review-panel { padding: 12px; }
.sp-workspace-layout.is-floor-collapsed { grid-template-columns: 95px minmax(0,1fr) 250px; }
.sp-floor-toggle { display:flex; align-items:center; gap:4px; width:100%; padding:0 0 8px; border:0; background:transparent; text-align:left; font-weight:600; color:#203454; cursor:pointer; }
.sp-floor-toggle .material-icons { font-size:19px; }
.sp-floor-nav>div { max-height:min(52vh, 500px); overflow:auto; }
.sp-workspace-floor { padding:6px 8px; }
.sp-map-frame { height:max(500px, 62vh); min-height:500px; margin-top:8px; }
@media(max-width:900px){.sp-workspace-layout.is-floor-collapsed{grid-template-columns:95px minmax(0,1fr)}}
@media(max-width:560px){.sp-workspace-layout.is-floor-collapsed{grid-template-columns:1fr}.sp-floor-nav>div{max-height:none}}

/* Cards inspired by the Mind Makers grid: a compact front and a useful reverse. */
.sp-building-card { overflow: visible; border: 0; border-radius: 24px; background: transparent; box-shadow: none; perspective: 1100px; animation: sp-card-enter .38s ease both; }
.sp-card-rotator { display: grid; height: 100%; min-height: 305px; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.sp-building-card.is-flipped .sp-card-rotator { transform: rotateY(180deg); }
.sp-card-face { grid-area: 1 / 1; min-width: 0; border: 1px solid #e4eaf2; border-radius: 24px; backface-visibility: hidden; background: #fff; box-shadow: 0 12px 26px rgba(34,52,88,.13); overflow: hidden; }
.sp-card-front { display: flex; flex-direction: column; padding: 13px; }
.sp-building-image { position: relative; height: 155px; flex: none; border: 0; border-radius: 15px; }
.sp-building-image img { transition: transform .3s ease; }
.sp-building-image:hover img { transform: scale(1.04); }
.sp-image-label { position: absolute; bottom: 0; left: 0; padding: 7px 12px; border-radius: 0 12px 0 0; background: var(--sp-card-color); color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px #222; }
.sp-building-info { display: flex; flex: 1; flex-direction: column; padding: 14px 4px 0; }
.sp-building-title { line-height: 1.25; }
.sp-card-edit { margin-left: auto; flex: none; }
.sp-building-footer { margin-top: auto; padding-top: 8px; }
.sp-card-flip { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 0; border-radius: 12px; background: #edf2fa; color: #536a8e; cursor: pointer; }
.sp-card-flip:hover, .sp-card-flip:focus-visible { background: #dce8fc; color: #174aa7; outline: 2px solid #4879df; outline-offset: 2px; }
.sp-card-flip .material-icons { font-size: 21px; }
.sp-card-back { display: flex; flex-direction: column; padding: 21px; transform: rotateY(180deg); background: linear-gradient(145deg,#f6f9fe,#e7eef8); }
.sp-card-back-heading { display: flex; align-items: center; gap: 8px; font-size: 17px; color: #172b4d; overflow-wrap: anywhere; }
.sp-card-back-caption { margin: 8px 0 0; color: #697d99; font-size: 12px; }
.sp-card-back ul { margin: 16px 0; padding-left: 18px; color: #425a7c; font-size: 13px; line-height: 1.8; }
.sp-card-back-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; }
@keyframes sp-card-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .sp-building-card { animation: none; } .sp-card-rotator, .sp-building-image img { transition: none; } }

.sp-map-panel-head { align-items: center; }
.sp-map-fullscreen { margin-left: auto; flex: none; color: #335c9a; }
.sp-map-fullscreen .material-icons { font-size: 24px; }
.sp-map-panel:fullscreen { box-sizing: border-box; width: 100vw; height: 100vh; max-width: none; max-height: none; border-radius: 0; display: flex; flex-direction: column; background: #fff; padding: 12px; }
.sp-map-panel:fullscreen .sp-map-panel-head { flex: none; }
.sp-map-panel:fullscreen .sp-map-frame { flex: 1; width: 100%; height: 0; min-height: 0; }
.sp-map-panel:fullscreen .sp-map-placeholder { flex: 1; }

.sp-audience-picker { display:flex; flex-direction:column; gap:4px; font-size:12px; color:#556b8a; }
.sp-audience-picker select { max-width:190px; padding:5px 8px; border:1px solid #dbe4f0; border-radius:7px; color:#243c5d; background:#fff; }
.sp-map-panel-head { flex-wrap:wrap; }
.sp-building-card--unified .sp-building-image { opacity: .65; }
.sp-card-extra { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.sp-card-extra .btn { font-size:11px; padding:4px 7px; }
.sp-report-section { margin-top:18px; padding:16px; border:1px solid #e1e9f4; border-radius:14px; background:#f8faff; }
.sp-report-section ul { list-style:none; padding:0; margin:8px 0 0; }
.sp-report-section li { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0; }

/* Card hierarchy: own indoor maps first; supplementary physical units remain accessible. */
.sp-card-scope { display:block; margin-top:5px; font-size:12px; line-height:1.4; }
.sp-building-card--secondary .sp-building-image { filter:grayscale(1); }
.sp-building-card--secondary .sp-image-label { background:#858991; }
.sp-building-card--secondary .sp-building-title strong, .sp-building-card--secondary .sp-explore { color:#626b78; }
.sp-building-card--secondary .sp-explore { background:#f0f1f3; }
.sp-building-card--secondary { box-shadow:0 5px 15px rgba(30,45,65,.06); border-color:#e2e4e8; }
.sp-building-footer { flex-wrap:nowrap; }
.sp-building-footer .sp-explore { min-width:0; }
.sp-card-report { display:grid; place-items:center; box-sizing:border-box; width:38px; height:38px; flex:none; padding:0; border:0; border-radius:12px; background:#edf2fa; color:#536a8e; cursor:pointer; }
.sp-card-report .material-icons { font-size:21px; }
.sp-card-report:hover { background:#dce8fc; color:#174aa7; }
.sp-card-report:focus-visible { outline:2px solid #4879df; outline-offset:2px; }
.sp-building-footer .sp-card-flip { margin-left:auto; }

/* Compact outdoor complex card alongside "Explore seu local" */
.sp-outdoor-card { width: min(520px, 100%); flex: 0 1 520px; }
.sp-outdoor-card .sp-card-rotator { min-height: 118px; }
.sp-outdoor-card .sp-card-face { border-radius: 18px; box-shadow: 0 6px 18px rgba(34,52,88,.1); }
.sp-outdoor-card .sp-card-front { flex-direction: row; align-items: center; gap: 14px; padding: 10px 14px; }
.sp-outdoor-card .sp-building-image { width: 116px; height: 92px; border-radius: 12px; background: #f4f8fd; border: 1px solid #e2eaf5; }
.sp-outdoor-card .sp-building-image img.sp-outdoor-logo { object-fit: contain; padding: 10px; box-sizing: border-box; background: #fff; }
.sp-outdoor-card .sp-card-visual-empty .material-icons { font-size: 38px; }
.sp-outdoor-card .sp-image-label { padding: 4px 9px; font-size: 11px; border-radius: 0 9px 0 0; }
.sp-outdoor-card .sp-building-info { padding: 0; min-width: 0; gap: 4px; }
.sp-outdoor-card .sp-building-title { font-size: 15px; }
.sp-outdoor-card .sp-building-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 2px 0; font-size: 12.5px; }
.sp-outdoor-card-plans { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sp-outdoor-card .sp-building-footer { padding-top: 4px; gap: 12px; }
.sp-outdoor-card .sp-explore { padding: 6px 10px; font-size: 12.5px; }
.sp-outdoor-card .sp-card-report { width: 34px; height: 34px; border-radius: 10px; }
.sp-outdoor-card .sp-card-flip { width: 34px; height: 34px; border-radius: 10px; }
.sp-outdoor-card .sp-card-back { padding: 12px 16px; }
.sp-outdoor-card .sp-card-back ul { margin: 6px 0; line-height: 1.5; font-size: 12.5px; }
.sp-workspace-layout--outdoor { grid-template-columns: minmax(0, 1fr) 250px; }
@media (max-width: 900px) { .sp-workspace-layout--outdoor { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .sp-outdoor-card .sp-card-front { flex-direction: column; align-items: stretch; }
  .sp-outdoor-card .sp-building-image { width: 100%; height: 110px; }
}

/* Fallback when the browser denies the Fullscreen API; preserve the live map iframe. */
.sp-map-panel--expanded { position: fixed; inset: 0; z-index: 2147483000; box-sizing: border-box; width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; display: flex; flex-direction: column; background: #fff; padding: 12px; }
.sp-map-panel--expanded .sp-map-panel-head { flex: none; }
.sp-map-panel--expanded .sp-map-frame { flex: 1; width: 100%; height: 0; min-height: 0; }
.sp-map-panel--expanded .sp-map-placeholder { flex: 1; }

.sp-color-row {display:flex;align-items:center;gap:8px;}
.sp-color-row input[type="color"] {width:42px;height:38px;flex:none;padding:3px;border:1px solid #dbe4f0;border-radius:8px;cursor:pointer;}
.sp-color-row input[data-sp-draft] {min-width:0;flex:1;}
.sp-color-row .btn {flex:none;}

/* Review controls share the map header; the floor plan overlay remains inside the frame. */
.sp-preview-tools { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.sp-preview-tools .btn { min-height:32px; white-space:nowrap; }
.sp-preview-tools .btn span { margin:0; color:inherit; font-size:inherit; }
.sp-preview-tools [aria-pressed="true"] { color:#2856bc; background:#eaf0ff; border-color:#b8ccf4; }
.sp-pending-toggle { display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:0 9px; border:1px solid #dbe4f0; border-radius:7px; background:#fff; color:#243c5d; font-size:12px; font-weight:500; white-space:nowrap; cursor:pointer; user-select:none; box-sizing:border-box; }
.sp-pending-toggle input[type="checkbox"] { margin:0; cursor:pointer; }
.sp-pending-toggle:has(input:disabled) { opacity:.55; cursor:not-allowed; }

/* A single compact desktop control row; the title never distributes empty space between controls. */
.sp-map-panel {container-type:inline-size;}
.sp-map-panel-head {display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;}
.sp-map-heading {min-width:0;}
.sp-map-heading strong {overflow-wrap:anywhere;}
.sp-map-toolbar {display:flex;align-items:flex-end;justify-content:flex-start;gap:8px;flex-wrap:wrap;min-width:0;}
.sp-map-toolbar .sp-audience-picker {flex:0 1 auto;min-width:0;}
.sp-map-toolbar select {box-sizing:border-box;max-width:158px;min-height:32px;}
.sp-map-toolbar .sp-preview-tools {flex-wrap:nowrap;gap:4px;}
.sp-map-toolbar .sp-preview-tools .btn {font-size:12px;padding:5px 7px;min-height:32px;}
.sp-map-toolbar .sp-map-fullscreen {flex:0 0 32px;width:32px;height:32px;}
.sp-map-panel--expanded [data-sp-lifecycle-map] {flex:none;max-height:28dvh;overflow:auto;}
@container (min-width:1100px){.sp-map-panel-head {flex-direction:row;align-items:center;}.sp-map-heading {flex:1;}.sp-map-toolbar {flex:none;}}
@container (max-width:480px){.sp-map-toolbar .sp-preview-tools {flex-wrap:wrap;}.sp-map-toolbar {gap:6px;}}

.sp-workspace-side{min-width:0;background:#fff;border:1px solid #e1e8f1;border-radius:14px;padding:14px;align-self:start}
.sp-workspace-layout.is-technical{grid-template-columns:175px minmax(0,1fr) minmax(290px,330px)}
.sp-workspace-layout.is-technical.is-floor-collapsed{grid-template-columns:48px minmax(0,1fr) minmax(290px,330px)}
/* Collapsed floor rail: the chevron on top and the current floor name upright on a single line, never wrapped. */
.sp-workspace-layout.is-technical.is-floor-collapsed .sp-floor-toggle{flex-direction:column;align-items:center;gap:8px;padding:0;text-align:center}
.sp-workspace-layout.is-technical.is-floor-collapsed .sp-floor-toggle span{display:block;max-height:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;line-height:1.2}
.sp-workspace-side>details{margin-top:14px;padding-top:12px;border-top:1px solid #e1e8f1;font-size:13px}
.sp-workspace-side>details>summary{display:flex;align-items:flex-start;gap:8px;cursor:pointer;list-style:none;font-weight:600;color:#425976}.sp-workspace-side>details>summary::-webkit-details-marker{display:none}.sp-workspace-side>details[open]>summary{margin-bottom:8px}
.sp-step-number{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:50%;background:#243c5d;color:#fff;font-size:12px;font-weight:700;line-height:1}.sp-step-text{display:flex;flex-direction:column;flex:1;min-width:0;gap:2px}.sp-step-title{font-size:15px;line-height:22px}.sp-step-summary{font-size:12px;font-weight:400;line-height:1.35;color:#6f7f99;overflow-wrap:anywhere}.sp-step-chevron{flex:none;font-size:20px;line-height:22px;color:#7e8da4;transition:transform .15s}.sp-workspace-side>details[open]>summary .sp-step-chevron{transform:rotate(180deg)}@media(prefers-reduced-motion:reduce){.sp-step-chevron{transition:none}}
.sp-workspace-side .sp-review-panel{border:0;padding:10px 0 0;border-radius:0}.sp-workspace-side .ml-map-progress{margin:0}
.sp-legacy-card .sp-building-info{padding:16px}.sp-legacy-card p{font-size:12px;color:#66758b}
@media(max-width:1000px){.sp-workspace-layout.is-technical,.sp-workspace-layout.is-technical.is-floor-collapsed{grid-template-columns:48px minmax(0,1fr)}.sp-workspace-side{grid-column:2}.sp-workspace-layout.is-technical .sp-floor-nav{grid-row:1/3}}
@media(max-width:560px){.sp-workspace-layout.is-technical,.sp-workspace-layout.is-technical.is-floor-collapsed{grid-template-columns:minmax(0,1fr)}.sp-workspace-side{grid-column:1}.sp-workspace-layout.is-technical .sp-floor-nav{grid-row:auto}.sp-workspace-side{padding:12px}}

/* The outdoor map has no floor rail. The technical three-column grid would otherwise drop the map into that narrow first column. */
.sp-unit-owner { display: flex; align-items: center; gap: 8px; margin-left: auto; color: #425976; font-size: 13px; }
.sp-unit-owner select { min-height: 32px; }
.sp-team-note { margin: 0 0 12px; color: #5d6e86; font-size: 13px; line-height: 1.45; }
.sp-team-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 0 12px; }
.sp-team-filter { display: flex; flex-direction: column; gap: 4px; min-width: 140px; color: #425976; font-size: 12px; }
.sp-team-filter select { min-height: 32px; }
.sp-team-wrap { overflow: auto; border: 1px solid #e1e8f1; border-radius: 12px; }
.sp-team-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sp-team-table th, .sp-team-table td { padding: 8px 10px; border-bottom: 1px solid #e8edf5; text-align: left; vertical-align: top; }
.sp-team-table th { color: #5d6e86; font-size: 12px; font-weight: 600; }
.sp-team-open { padding: 0; border: 0; background: none; color: #1d4e89; font: inherit; text-align: left; cursor: pointer; }
.sp-team-open:hover { text-decoration: underline; }
.sp-workspace-layout--outdoor.is-technical { grid-template-columns: minmax(0, 1fr) minmax(290px, 330px); }
@media (max-width: 1000px) {
  .sp-workspace-layout--outdoor.is-technical { grid-template-columns: minmax(0, 1fr); }
  .sp-workspace-layout--outdoor.is-technical .sp-workspace-side { grid-column: 1; }
}