/* Visualizador BIM / IFC — camada visual do componente.
   Todas as cores vêm dos tokens declarados em portal.css. */

.bim {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--edge);
  background: var(--card);
  overflow: hidden;
  isolation: isolate;
}

.bim__stage {
  position: relative;
  background:
    radial-gradient(115% 88% at 50% 4%,
      color-mix(in oklab, var(--paper-2) 82%, var(--warm)) 0%,
      var(--paper-2) 58%,
      color-mix(in oklab, var(--fg-2) 46%, var(--warm)) 100%);
  touch-action: none;
  cursor: grab;
}

.bim__stage:active { cursor: grabbing; }
.bim__stage.is-picking { cursor: crosshair; }

.bim__canvas {
  display: block;
  width: 100%;
  height: clamp(340px, 44vw, 520px);
}

/* --- superfícies da maquete --------------------------------------------- */

.bim-ground     { fill: color-mix(in oklab, var(--ink-3) 9%, transparent); stroke: none; }
.bim-grid       { stroke: color-mix(in oklab, var(--ink-3) 26%, transparent); stroke-width: 1; fill: none; }
.bim-grid--axis { stroke: color-mix(in oklab, var(--ink-3) 46%, transparent); }

/* estrutura + alvenaria concluídas: massa cheia, tom mais denso */
.bim-face--sealed-a { fill: color-mix(in oklab, var(--navy) 40%, var(--warm)); }
.bim-face--sealed-b { fill: color-mix(in oklab, var(--navy) 27%, var(--warm)); }
.bim-face--sealed-t { fill: color-mix(in oklab, var(--navy) 52%, var(--warm)); }

/* apenas estrutura executada: laje aparente, mais clara */
.bim-face--built-a  { fill: color-mix(in oklab, var(--ink-3) 19%, var(--warm)); }
.bim-face--built-b  { fill: color-mix(in oklab, var(--ink-3) 11%, var(--warm)); }
.bim-face--built-t  { fill: color-mix(in oklab, var(--ink-3) 27%, var(--warm)); }

/* pavimento previsto: volume fantasma */
.bim-face--plan-a   { fill: color-mix(in oklab, var(--ink-3) 7%, transparent); }
.bim-face--plan-b   { fill: color-mix(in oklab, var(--ink-3) 4%, transparent); }
.bim-face--plan-t   { fill: color-mix(in oklab, var(--ink-3) 9%, transparent); }

.bim-edge {
  fill: none;
  stroke: color-mix(in oklab, var(--ink) 34%, transparent);
  stroke-width: 0.9;
  stroke-linejoin: round;
}

.bim-edge--plan {
  stroke: color-mix(in oklab, var(--ink-3) 62%, transparent);
  stroke-width: 0.85;
  stroke-dasharray: 3 3.5;
}

.bim-edge--level {
  stroke: var(--navy);
  stroke-width: 1.9;
  stroke-linejoin: round;
}

/* --- modo comercial: a cor passa a dizer o que ainda está à venda -------- */

/* disponível — é o que o site está vendendo, então fica com o azul cheio */
.bim-face--free-a { fill: color-mix(in oklab, var(--navy) 46%, var(--warm)); }
.bim-face--free-b { fill: color-mix(in oklab, var(--navy) 32%, var(--warm)); }
.bim-face--free-t { fill: color-mix(in oklab, var(--navy) 60%, var(--warm)); }

/* reservado — mesmo azul, um grau abaixo */
.bim-face--hold-a { fill: color-mix(in oklab, var(--navy) 20%, var(--warm)); }
.bim-face--hold-b { fill: color-mix(in oklab, var(--navy) 13%, var(--warm)); }
.bim-face--hold-t { fill: color-mix(in oklab, var(--navy) 27%, var(--warm)); }

/* pavimento esgotado — sai do azul e vira massa neutra. O cinza precisa ter
   corpo: a metade de baixo da torre está toda vendida e, mais clara do que
   isto, o prédio parecia oco justamente onde tem mais massa. */
.bim-face--sold-a { fill: color-mix(in oklab, var(--ink-3) 26%, var(--warm)); }
.bim-face--sold-b { fill: color-mix(in oklab, var(--ink-3) 16%, var(--warm)); }
.bim-face--sold-t { fill: color-mix(in oklab, var(--ink-3) 34%, var(--warm)); }

/* embasamento: hall, lazer e garagem — não entram no espelho */
.bim-face--base-a { fill: color-mix(in oklab, var(--ink-3) 33%, var(--warm)); }
.bim-face--base-b { fill: color-mix(in oklab, var(--ink-3) 21%, var(--warm)); }
.bim-face--base-t { fill: color-mix(in oklab, var(--ink-3) 42%, var(--warm)); }

/* --- seleção ------------------------------------------------------------- *
   O realce usa as classes genéricas de face, não a lista de estados: assim
   vale nos dois modos. E puxa o azul-marinho fundo, que não se confunde com
   o azul de "disponível" do espelho.
-------------------------------------------------------------------------- */

.bim-floor--selected .bim-face--t { fill: color-mix(in oklab, var(--navy-deep) 74%, var(--warm)); }
.bim-floor--selected .bim-face--a { fill: color-mix(in oklab, var(--navy-deep) 56%, var(--warm)); }
.bim-floor--selected .bim-face--b { fill: color-mix(in oklab, var(--navy-deep) 40%, var(--warm)); }

.bim-floor--selected .bim-edge { stroke: var(--navy-deep); stroke-width: 1.3; }

.bim-floor { cursor: pointer; }

/* --- sobreposições ------------------------------------------------------- */

.bim__tag {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 8px 12px;
  border-radius: var(--edge);
  border: 1px solid var(--rule);
  background: color-mix(in oklab, var(--card) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: right;
}

.bim__tag-name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.bim__tag-date { font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.02em; }

.bim__readout {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 3;
  display: flex;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  pointer-events: none;
}

.bim__readout b { color: var(--ink-2); font-weight: 500; }

.bim__hint {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 3;
  font-size: 10.5px;
  color: var(--ink-3);
  pointer-events: none;
  opacity: 0.9;
}

/* --- barra de ferramentas ------------------------------------------------ */

.bim__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--rule);
  background: var(--card);
}

.bim__tools { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.bim__tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  border-radius: var(--edge);
  border: 1px solid transparent;
  background: none;
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}

.bim__tool:hover { background: var(--paper-2); color: var(--ink); }
.bim__tool[aria-pressed="true"] { background: var(--navy-soft); color: var(--navy-deep); font-weight: 600; }
.bim__tool svg { flex: none; opacity: 0.75; }
.bim__tool[aria-pressed="true"] svg { opacity: 1; }

.bim__zoom {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--edge);
  overflow: hidden;
}

.bim__zoom button {
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.bim__zoom button:hover { background: var(--paper-2); color: var(--ink); }
.bim__zoom button + button { border-left: 1px solid var(--rule); }

.bim__legend {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--ink-3);
}

.bim__legend span { display: inline-flex; align-items: center; gap: 6px; }

.bim__swatch {
  width: 9px; height: 9px; border-radius: 2px; flex: none;
  border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
}

.bim__swatch--sealed { background: color-mix(in oklab, var(--navy) 34%, var(--warm)); }
.bim__swatch--built  { background: color-mix(in oklab, var(--ink-3) 29%, var(--warm)); }
.bim__swatch--plan   { background: var(--card); border-style: dashed; }

.bim__swatch--free { background: color-mix(in oklab, var(--navy) 48%, var(--warm)); }
.bim__swatch--hold { background: color-mix(in oklab, var(--navy) 20%, var(--warm)); border-style: dashed; }
.bim__swatch--sold { background: color-mix(in oklab, var(--ink-3) 34%, var(--warm)); }
.bim__swatch--base { background: color-mix(in oklab, var(--ink-3) 43%, var(--warm)); }

.bim__swatch--line {
  width: 14px; height: 0; border: 0;
  border-top: 2px solid var(--navy);
  border-radius: 0;
}

/* --- painel de pavimentos ------------------------------------------------ */

.bim__floors {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  width: 214px;
  display: flex;
  flex-direction: column;
  background: color-mix(in oklab, var(--card) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left: 1px solid var(--rule);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--motion-base) var(--ease-standard),
              visibility var(--motion-base) var(--ease-standard);
}

.bim__floors.is-open { transform: translateX(0); visibility: visible; }

.bim__floors-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-4);
  border-bottom: 1px solid var(--rule);
}

.bim__floors-close {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--edge-2); background: none;
  color: var(--ink-3); cursor: pointer; font-size: 15px; line-height: 1;
}

.bim__floors-close:hover { background: var(--paper-2); color: var(--ink); }

.bim__floors-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.bim__floor-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 32px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--edge-2);
  background: none;
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--text-xs);
  text-align: left;
  cursor: pointer;
}

.bim__floor-btn:hover { background: var(--paper-2); color: var(--ink); }
.bim__floor-btn[aria-pressed="true"] { background: var(--navy-soft); color: var(--navy-deep); font-weight: 600; }

.bim__floor-dot {
  width: 7px; height: 7px; border-radius: 2px; flex: none;
  border: 1px solid color-mix(in oklab, var(--ink) 16%, transparent);
}

.bim__floor-dot--sealed { background: color-mix(in oklab, var(--navy) 42%, var(--warm)); }
.bim__floor-dot--built  { background: color-mix(in oklab, var(--ink-3) 34%, var(--warm)); }
.bim__floor-dot--plan   { background: var(--card); border-style: dashed; }

.bim__floor-dot--free { background: color-mix(in oklab, var(--navy) 48%, var(--warm)); }
.bim__floor-dot--hold { background: color-mix(in oklab, var(--navy) 20%, var(--warm)); border-style: dashed; }
.bim__floor-dot--sold { background: color-mix(in oklab, var(--ink-3) 34%, var(--warm)); }
.bim__floor-dot--base { background: color-mix(in oklab, var(--ink-3) 45%, var(--warm)); }

.bim__floor-name { flex: 1; min-width: 0; }

.bim__floor-state {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

@media (max-width: 720px) {
  .bim__floors { width: min(214px, 68%); }
  .bim__hint { display: none; }
  .bim__bar { justify-content: flex-start; }
  .bim__legend { order: 2; width: 100%; }
}