/* ===== Maquety Arquitetura — editor da planta (sobre o app.css da Marcenaria) ===== */
:root {
  --plan-bg: #fbfaf7; --wall: #3a342d; --wall-low: #8c8378; --grid1: #ebe6dd; --grid2: #d9d2c6;
  --item-stroke: #5d554b; --scene-ground: #d5dccb; --sky1: #eef3f7; --sky2: #f8f6f1;
}
[data-theme="dark"] {
  --plan-bg: #1b1915; --wall: #e4dccf; --wall-low: #8f8678; --grid1: #26231e; --grid2: #34302a;
  --item-stroke: #b9b0a3; --scene-ground: #3b4136; --sky1: #1c232a; --sky2: #191714;
}
.small { font-size: 12.5px; }
.sm-l, .mobile-only { display: none; }
.sec-t { font-size: 15px; margin: 22px 0 10px; }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.badge { display: inline-block; font-size: 11px; font-weight: 650; padding: 2px 7px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-text); }
.search { width: 220px; max-width: 100%; }

/* ---------- lista de projetos ---------- */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.proj { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.proj-open { border: 0; background: var(--plan-bg); padding: 8px; cursor: pointer; height: 180px; border-bottom: 1px solid var(--border); display: block; width: 100%; }
.proj-open svg { width: 100%; height: 100%; }
.proj-info { padding: 10px 14px 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proj-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-actions { display: flex; gap: 6px; padding: 8px 14px 12px; align-items: center; }
.proj-actions .btn.primary { margin-right: auto; }
.empty { grid-column: 1 / -1; color: var(--text-2); }
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.mode-card { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; border: 1.5px solid var(--border); background: var(--surface); border-radius: 12px; padding: 12px; cursor: pointer; color: var(--text-2); font-size: 12.5px; }
.mode-card svg { width: 22px; height: 22px; color: var(--accent); }
.mode-card b { color: var(--text); font-size: 14px; }
.mode-card.on { border-color: var(--accent); background: var(--accent-soft); }
.gen h3 { margin-bottom: 12px; }
.gen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.set-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ai-soon { border-style: dashed; }
.ai-soon svg { width: 18px; height: 18px; color: var(--text-3); }

/* ---------- catálogo ---------- */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lib-card { padding: 10px; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; font-size: 13px; }
.lib-svg { width: 100%; height: 74px; }
.lib-card .tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.lib .cat-item .lib-svg { height: 58px; }

/* ---------- editor ---------- */
body.in-editor .main { padding: 0; }
.ed { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; }
.ed-top { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }
.ed-name { width: 240px; max-width: 40vw; font-weight: 650; }
.ed-sp { flex: 1; }
.ed-tools { display: flex; align-items: center; gap: 2px; padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }
.tool { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid transparent; background: none; border-radius: 8px; cursor: pointer; color: var(--text-2); font-weight: 600; font-size: 13px; }
.tool svg { width: 18px; height: 18px; }
.tool:hover { background: var(--surface-2); color: var(--text); }
.tool.on { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); }
.tool-sep { width: 1px; height: 22px; background: var(--border); margin: 0 6px; }
.ed-len { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.ed-len label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.ed-len .input { width: 82px; height: 32px; }
.ed-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.ed[data-view="split"] .ed-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px; }
.ed[data-view="2d"] .ed-3d { display: none; }
.ed[data-view="3d"] .ed-2d { display: none; }
.ed-2d, .ed-3d { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.ed-3d { border-left: 1px solid var(--border); background: linear-gradient(var(--sky1), var(--sky2)); display: flex; flex-direction: column; }
.ed[data-view="3d"] .ed-3d { border-left: 0; }
.plan-svg { display: block; width: 100%; height: 100%; background: var(--plan-bg); touch-action: none; user-select: none; -webkit-user-select: none; outline: none; cursor: crosshair; }
.ed[data-tool="select"] .plan-svg { cursor: default; }
.plan-svg.thumb { background: none; }
.ed-hint { position: absolute; left: 10px; top: 10px; max-width: min(420px, calc(100% - 20px)); font-size: 12px; color: var(--text-2); background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; pointer-events: none; }
.ed-hint:empty { display: none; }
.ed-scale { position: absolute; left: 12px; bottom: 10px; font-size: 11px; font-weight: 650; color: var(--text-2); display: flex; align-items: center; gap: 6px; pointer-events: none; }
.ed-scale i { display: block; height: 6px; border: 1.5px solid var(--text-2); border-top: 0; }
.ed-props { border-left: 1px solid var(--border); background: var(--surface); overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pp-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.pp-head svg { width: 18px; height: 18px; color: var(--accent); }
.pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-grid .wide { grid-column: 1 / -1; }
.pp-grid .input { height: 34px; width: 100%; min-width: 0; }
.pp-grid .input.color { padding: 2px; }
.pp-act { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-tip { font-size: 12.5px; color: var(--text-3); margin: 0; }
.pp-soon { font-size: 12.5px; color: var(--text-2); margin: 0; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: 8px; padding: 8px 10px; }
.pp-soon svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: var(--text-3); }
.pp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pp-stats div { background: var(--surface-2); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; }
.pp-stats span { font-size: 11px; color: var(--text-3); }
.pp-stats b { font-variant-numeric: tabular-nums; }
.pp-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp-tbl td { padding: 5px 2px; border-bottom: 1px solid var(--border); }
.pp-tbl td.num { text-align: right; white-space: nowrap; }
.pp-tbl .tot td { font-weight: 750; border-bottom: 0; }

/* desenho da planta */
.plan-svg .g1 { fill: none; stroke: var(--grid1); }
.plan-svg .g2 { fill: none; stroke: var(--grid2); }
.floor { fill: var(--fl); fill-opacity: .5; }
.floor.sel { fill: var(--accent); fill-opacity: .18; stroke: var(--accent); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.walls-o polygon { fill: var(--wall); stroke: var(--wall); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.walls-f polygon { fill: var(--wall); }
.walls-f polygon.low { fill: var(--wall-low); }
.walls-f polygon.sel { fill: var(--accent); }
.item > * { fill: var(--ic); fill-opacity: .55; stroke: var(--item-stroke); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.item > path { fill: none; }
.item .dk { fill: #000; fill-opacity: .14; }
.item .ch { fill: var(--surface); fill-opacity: .9; }
.item .glass { fill: #9cc9e0; fill-opacity: .35; }
.item.high > * { stroke-dasharray: 5 3; }
.item.sel > * { stroke: var(--accent); stroke-width: 2px; }
.op .cut { fill: var(--plan-bg); }
.op .jamb, .op .win, .op .leaf { fill: none; stroke: var(--wall); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.op .swing { fill: none; stroke: var(--wall); stroke-width: 1px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.op.sel .jamb, .op.sel .win, .op.sel .leaf, .op.sel .swing { stroke: var(--accent); stroke-width: 2.2px; }
.op.sel .cut { fill: var(--accent-soft); }
.rlabel text { fill: var(--text); font-weight: 700; font-family: var(--font); pointer-events: none; }
.rlabel .ar { fill: var(--text-2); font-weight: 550; }
.dim path { fill: none; stroke: var(--accent-text); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.dim text { fill: var(--accent-text); font-weight: 650; font-family: var(--font); }
.dim.tot path { stroke: var(--text-2); }
.dim.tot text { fill: var(--text-2); }
.dim.live path { stroke: var(--accent); }
.dim.live text { fill: var(--accent); font-weight: 800; }
.node { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.node.on { fill: var(--accent); stroke: #fff; }
.guide { stroke: #2f9bd6; stroke-width: 1px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.pv { stroke: var(--accent); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.pvw { fill: var(--accent); fill-opacity: .35; stroke: var(--accent); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.pvr { fill: var(--accent); fill-opacity: .1; stroke: var(--accent); stroke-width: 2px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.ghost { fill: var(--accent); fill-opacity: .4; }
.snapdot { fill: none; stroke: var(--accent); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.snapdot.node { fill: var(--accent); }
.snapdot.wall, .snapdot.align { stroke: #2f9bd6; }

/* 3D */
.c3-wrap { flex: 1; min-height: 0; cursor: grab; touch-action: none; user-select: none; display: grid; place-items: center; }
.c3-wrap:active { cursor: grabbing; }
.c3-svg { width: 100%; height: 100%; display: block; }
.c3-ctrl { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; pointer-events: none; }
.c3-ctrl > * { pointer-events: auto; }
.c3-ctrl .btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.seg.sm button { padding: 4px 9px; font-size: 12.5px; }
.c3-tip { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 11.5px; color: var(--text-3); pointer-events: none; }
.empty-3d { color: var(--text-3); padding: 20px; text-align: center; }

@media (max-width: 1100px) {
  .ed[data-view="split"] .ed-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .ed[data-view="split"] .ed-props { grid-column: 1 / -1; max-height: 30vh; border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 860px) {
  .pc-only { display: none !important; }
  .ed { height: calc(100dvh - 62px - env(safe-area-inset-bottom, 0px)); }
  body.in-editor .main { padding: 0 0 calc(62px + env(safe-area-inset-bottom, 0px)); }
  .ed-top { padding: 6px 8px; gap: 6px; }
  .ed-name { display: none; }
  .sm-l { display: inline; } .lg { display: none; } .ed-props .mobile-only { display: flex; }
  .ed-top { flex-wrap: nowrap; justify-content: space-between; }
  .ed-top .seg button { padding: 6px 9px; font-size: 12.5px; }
  .ed-sp { display: none; }
  .ed-tools { flex-wrap: wrap; justify-content: center; padding: 4px 6px; gap: 2px; } /* no celular as ferramentas quebram linha (antes ficavam escondidas à direita) */
  .ed-tools::-webkit-scrollbar { display: none; }
  .tool { flex-direction: column; height: auto; padding: 4px 8px; gap: 1px; font-size: 10.5px; flex: none; }
  .tool svg { width: 20px; height: 20px; }
  .tool-sep { height: 30px; flex: none; }
  .ed-len { flex: none; }
  .ed-body, .ed[data-view="split"] .ed-body { display: flex; flex-direction: column; }
  .ed-2d, .ed-3d { flex: 1; }
  .ed[data-view="split"] .ed-3d { display: none; }
  .ed-3d { border-left: 0; }
  .ed-props, .ed[data-view="split"] .ed-props { max-height: 30vh; border-left: 0; border-top: 1px solid var(--border); padding: 10px 12px; flex: none; }
  .ed-hint { font-size: 11.5px; }
  .set-grid { grid-template-columns: minmax(0, 1fr); }
  .mode-pick { grid-template-columns: 1fr; }
  .head-actions { width: 100%; }
  .head-actions .search { flex: 1; width: auto; }
}