/* =========================================================
   Planta 3D — estilos do visualizador (skill planta-3d). Tudo dentro de .p3d para não colidir com o
   CSS do site. Identidade visual: só as variáveis abaixo (montar_web.py preenche a partir do tema.json).
   ========================================================= */
.p3d {
  --p3d-primaria: #00484C;         /* botões ativos, textos de destaque, barra de carregamento */
  --p3d-destaque: #6AD7A0;         /* ativo à noite, "Reconstruir planta", foco */
  --p3d-texto: #001314;            /* texto sobre o destaque */
  --p3d-sobre-primaria: #FFFFFF;
  --p3d-fonte: system-ui, sans-serif;
  --p3d-raio: 6px;
  --p3d-altura: min(640px, 74vh);  /* altura do palco quando embutido numa página */
  --p3d-fundo-dia: radial-gradient(120% 95% at 50% 42%, #ffffff 0%, #f1f2f0 70%, #e9ebe8 100%);
  --p3d-fundo-noite: radial-gradient(120% 95% at 50% 42%, #1c2738 0%, #0e1521 65%, #090d15 100%);
  font-family: var(--p3d-fonte);
}
.p3d *, .p3d *::before, .p3d *::after { box-sizing: border-box; }
.p3d .ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p3d button { font: inherit; }
.p3d-sprite { display: none; }

.p3d__stage {
  --p3d-panel: rgba(255, 255, 255, .92);
  --p3d-ink: var(--p3d-primaria);
  --p3d-muted: #6b7a7b;
  --p3d-hover: rgba(0, 0, 0, .06);
  position: relative;
  height: var(--p3d-altura);
  min-height: 420px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--p3d-fundo-dia);
  user-select: none;
  -webkit-user-select: none;
}
.p3d__stage::before {      /* fundo da noite (transição suave) */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--p3d-fundo-noite);
  opacity: 0; transition: opacity 1s;
}
.p3d.is-night .p3d__stage::before { opacity: 1; }
.p3d.is-night .p3d__stage {
  --p3d-panel: rgba(16, 24, 36, .82);
  --p3d-ink: #eaf2f1;
  --p3d-muted: #9fb0b4;
  --p3d-hover: rgba(255, 255, 255, .08);
}
.p3d__stage canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; outline: none; cursor: grab; touch-action: none; }
.p3d__stage canvas:active { cursor: grabbing; }

/* ---------- painel de cômodos ---------- */
.p3d__rooms {
  position: absolute; z-index: 3; left: 16px; top: 16px; width: 228px;
  padding: 12px; border-radius: 10px;
  background: var(--p3d-panel); color: var(--p3d-ink);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background-color .8s, color .8s;
}
.p3d__rooms-title { margin: 2px 6px 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--p3d-muted); }
.p3d__room-list { display: flex; flex-direction: column; gap: 2px; touch-action: pan-x pan-y; }
.p3d__room {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  width: 100%; padding: 8px 10px; border: 0; border-radius: var(--p3d-raio);
  background: transparent; color: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.p3d__room small { font-size: 12px; font-weight: 500; color: var(--p3d-muted); white-space: nowrap; }
.p3d__room:hover { background: var(--p3d-hover); }
.p3d__room.is-active { background: var(--p3d-primaria); color: var(--p3d-sobre-primaria); }
.p3d__room.is-active small { color: color-mix(in srgb, var(--p3d-sobre-primaria) 75%, transparent); }
.p3d.is-night .p3d__room.is-active { background: var(--p3d-destaque); color: var(--p3d-texto); }
.p3d.is-night .p3d__room.is-active small { color: color-mix(in srgb, var(--p3d-texto) 70%, transparent); }
.p3d__room:focus-visible, .p3d__seg button:focus-visible, .p3d__fs:focus-visible, .p3d__rebuild:focus-visible,
.p3d__opt:focus-visible { outline: 2px solid var(--p3d-destaque); outline-offset: 2px; }
.p3d__rebuild {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 40px; margin-top: 10px; border: 0; border-radius: var(--p3d-raio);
  background: var(--p3d-destaque); color: var(--p3d-texto); font-size: 14px; font-weight: 700; cursor: pointer;
}
.p3d__rebuild[hidden] { display: none; }
.p3d__rebuild:hover { filter: brightness(1.06); }

/* ---------- ferramentas (dia/noite, 3D/2D, paredes, acabamentos, tela cheia) ---------- */
.p3d__tools { position: absolute; z-index: 3; right: 16px; top: 16px; display: flex; gap: 8px; }
.p3d__seg, .p3d__fs {
  display: flex; padding: 3px; border-radius: 8px;
  background: var(--p3d-panel); box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background-color .8s;
}
.p3d__seg button {
  display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border: 0; border-radius: var(--p3d-raio); background: transparent; color: var(--p3d-ink);
  font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color .15s, color .15s;
}
.p3d__seg button:hover { background: var(--p3d-hover); }
.p3d__seg button.is-active, .p3d__seg .p3d__finish-btn[aria-expanded="true"] { background: var(--p3d-primaria); color: var(--p3d-sobre-primaria); }
.p3d.is-night .p3d__seg button.is-active, .p3d.is-night .p3d__seg .p3d__finish-btn[aria-expanded="true"] { background: var(--p3d-destaque); color: var(--p3d-texto); }
.p3d__seg button.is-loading .ico { animation: p3d-pulse .9s ease-in-out infinite; }
@keyframes p3d-pulse { 50% { opacity: .35; } }
.p3d__fs { width: 40px; height: 40px; align-items: center; justify-content: center; border: 0; color: var(--p3d-ink); cursor: pointer; }

/* ---------- acabamentos (piso / paredes) ---------- */
.p3d__finish {
  position: absolute; z-index: 3; right: 16px; top: 66px; width: 236px;
  padding: 10px 12px 12px; border-radius: 10px;
  background: var(--p3d-panel); color: var(--p3d-ink);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.p3d__finish[hidden] { display: none; }
.p3d__finish-title { margin: 4px 4px 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--p3d-muted); }
.p3d__finish-title + .p3d__opts { margin-bottom: 8px; }
.p3d__opts { display: flex; flex-direction: column; gap: 2px; }
.p3d__opt {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--p3d-raio);
  background: transparent; color: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
}
.p3d__opt:hover, .p3d__opt.is-active { background: var(--p3d-hover); }
.p3d__opt.is-active { font-weight: 700; }
.p3d__sw { flex: none; width: 26px; height: 26px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.p3d__opt.is-active .p3d__sw { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 2px var(--p3d-panel), 0 0 0 4px var(--p3d-primaria); }
.p3d.is-night .p3d__opt.is-active .p3d__sw { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 2px var(--p3d-panel), 0 0 0 4px var(--p3d-destaque); }

/* ---------- etiquetas dos cômodos ---------- */
.p3d__labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.p3d__label {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 4px 10px 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .9); color: var(--p3d-primaria);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
  font-size: 12px; font-weight: 700; line-height: 1.15; white-space: nowrap;
  pointer-events: auto; cursor: pointer;
  opacity: 0; transition: opacity .35s, background-color .8s, color .8s;
  will-change: transform;
}
.p3d__label small { font-size: 11px; font-weight: 500; color: #5d6d6e; }
.p3d__label.is-on { opacity: 1; }
.p3d.is-night .p3d__label { background: rgba(14, 22, 34, .85); color: #eaf2f1; }
.p3d.is-night .p3d__label small { color: #a9b8bb; }

/* ---------- carregamento / dica ---------- */
.p3d__loading {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--p3d-primaria); font-size: 15px; font-weight: 500; transition: opacity .5s;
}
.p3d__loading.is-done { opacity: 0; pointer-events: none; }
.p3d__bar { width: 220px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--p3d-primaria) 12%, transparent); overflow: hidden; }
.p3d__bar span { display: block; width: 0; height: 100%; background: var(--p3d-primaria); transition: width .2s; }
.p3d__hint {
  position: absolute; z-index: 3; left: 50%; bottom: 16px; translate: -50% 0; margin: 0;
  padding: 6px 12px; border-radius: 999px; background: var(--p3d-panel); color: var(--p3d-ink);
  font-size: 13px; white-space: nowrap; pointer-events: none; transition: opacity .6s;
}
.p3d__hint.is-hidden { opacity: 0; }
.p3d__note { margin-top: 12px; font-size: 13px; color: #80868D; text-align: center; }

/* ---------- tela cheia ---------- */
.p3d__stage:fullscreen { width: 100%; height: 100%; border-radius: 0; }
.p3d__stage.is-pseudo-full { position: fixed; inset: 0; z-index: 200; height: 100%; border-radius: 0; }

/* ---------- celular ---------- */
@media (max-width: 760px) {
  .p3d__stage { height: 64vh; min-height: 420px; }
  .p3d__rooms {
    left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; padding: 6px;
    display: flex; align-items: center; gap: 6px;
  }
  .p3d__rooms-title { display: none; }
  .p3d__room-list { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 4px; flex: 1; }
  .p3d__room-list::-webkit-scrollbar { display: none; }
  .p3d__room { flex: none; width: auto; padding: 8px 12px; font-size: 14px; border-radius: 999px; }
  .p3d__room small { display: none; }
  .p3d .p3d__rebuild { flex: none; width: 40px; height: 36px; margin: 0; padding: 0; font-size: 0; gap: 0; border-radius: 999px; }
  .p3d__rebuild .ico { width: 18px; height: 18px; }
  .p3d__tools { right: 8px; top: 8px; gap: 6px; }
  .p3d__seg button { padding: 0 10px; }
  .p3d__seg button span { display: none; }
  .p3d__finish { right: 8px; top: 56px; width: min(236px, calc(100% - 16px)); }
  .p3d__hint { bottom: 64px; font-size: 12px; }
  .p3d__label { font-size: 10px; padding: 3px 7px; }
  .p3d__label small { font-size: 10px; }
  .p3d:not(.is-isolated) .p3d__label small { display: none; }
}

/* ---------- página dedicada (montar_web.py --modo pagina) ---------- */
body.p3d-pagina { margin: 0; display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.p3d-topo {
  position: relative; z-index: 10; flex: none; display: flex; align-items: center; gap: 20px;
  height: 64px; padding: 0 24px; overflow: hidden; font-family: var(--p3d-fonte);
  background: var(--p3d-primaria); color: var(--p3d-sobre-primaria);
}
.p3d-topo__logo { flex: none; display: block; border-radius: 4px; }
.p3d-topo__logo img { display: block; height: 32px; width: auto; }
.p3d-topo__logo:focus-visible { outline: 2px solid var(--p3d-destaque); outline-offset: 4px; }
.p3d-topo__sep { flex: none; width: 1px; height: 30px; background: color-mix(in srgb, var(--p3d-sobre-primaria) 25%, transparent); }
.p3d-topo__titulo { position: relative; z-index: 1; min-width: 0; }
.p3d-topo__titulo h1 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.p3d-topo__titulo h1 span { font-weight: 500; color: var(--p3d-destaque); }
.p3d-topo__titulo p { margin: 1px 0 0; font-size: 13px; line-height: 1.3; color: color-mix(in srgb, var(--p3d-sobre-primaria) 72%, transparent); }
.p3d-topo__titulo .is-curto { display: none; }
.p3d-topo__tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; vertical-align: 2px; background: var(--p3d-destaque); color: var(--p3d-texto); font-size: 11px; font-style: normal; font-weight: 700; }
.p3d-topo__grafismo { position: absolute; right: -28px; top: 50%; translate: 0 -50%; height: 128px; width: auto; color: var(--p3d-destaque); opacity: .16; pointer-events: none; }
body.p3d-pagina .p3d { position: relative; flex: 1; min-height: 0; display: flex; }
body.p3d-pagina .p3d__stage { flex: 1; min-width: 0; height: auto; min-height: 0; border-radius: 0; touch-action: none; }
@media (max-width: 760px) {
  .p3d-topo { height: 56px; gap: 12px; padding: 0 14px; }
  .p3d-topo__logo img { height: 24px; }
  .p3d-topo__sep { height: 24px; }
  .p3d-topo__titulo h1 { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
  .p3d-topo__tag { display: none; }
  .p3d-topo__titulo p { font-size: 11.5px; }
  .p3d-topo__titulo .is-longo { display: none; }
  .p3d-topo__titulo .is-curto { display: inline; }
  .p3d-topo__grafismo { display: none; }
  body.p3d-pagina .p3d__stage { height: auto; }
}