/* Planejador de cômodo (montarsetup.com.br)
   Usa os tokens da página quando existem (--blue, --line...) e cai em valores padrão quando não. */

.plj{
  --plj-ink: var(--ink, #14171f);
  --plj-ink-soft: var(--ink-soft, #565d6d);
  --plj-line: var(--line, #dde1e8);
  --plj-line-strong: var(--line-strong, #7f8796);
  --plj-blue: var(--blue, #2b4eff);
  --plj-blue-dim: var(--blue-dim, #eaeeff);
  --plj-orange: var(--orange, #ff6a3d);
  --plj-orange-dim: var(--orange-dim, #fff0ea);
  --plj-radius: var(--radius, 4px);
  --plj-green: var(--green, #177040);
  --plj-green-dim: var(--green-dim, #e7f5ec);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--plj-ink);
  line-height: 1.5;
}
.plj *, .plj *::before, .plj *::after{ box-sizing: border-box; }
.plj [hidden]{ display: none !important; }
.plj h3{
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700; font-size: 16px; line-height: 1.2; margin: 0 0 14px;
}

/* ---------- Estrutura ---------- */
.plj-layout{ display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 24px; align-items: start; }
.plj-controls{ display: flex; flex-direction: column; gap: 14px; }
.plj-card{ border: 1px solid var(--plj-line); background: #fff; padding: 20px; }

/* ---------- Campos ---------- */
.plj-field{ margin-bottom: 12px; }
.plj-field label{ display: block; color: var(--plj-ink); font-size: 14px; font-weight: 600; margin-bottom: 5px; }
/* 16px no campo evita o zoom automático do iPhone ao tocar */
.plj-field input, .plj-field select{
  width: 100%; min-height: 44px; border: 1px solid var(--plj-line-strong); background: #fff; border-radius: var(--plj-radius);
  padding: 9px 10px; color: var(--plj-ink); font: inherit; font-size: 16px;
}
.plj-help{ margin: -6px 0 14px; color: var(--plj-ink-soft); font-size: 13.5px; line-height: 1.45; }
.plj-field input:focus, .plj-field select:focus{ outline: 2px solid var(--plj-blue-dim); border-color: var(--plj-blue); }
.plj-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }

/* ---------- Botões ---------- */
.plj-btn{
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  padding: 11px 16px; border-radius: var(--plj-radius); border: 1.5px solid transparent;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.plj-btn:active{ transform: scale(.98); }
.plj-btn-primary{ background: var(--plj-blue); color: #fff; }
.plj-btn-primary:hover{ box-shadow: 0 4px 16px rgba(43, 78, 255, .3); }
.plj-btn-outline{ background: transparent; color: var(--plj-ink); border-color: var(--plj-line); }
.plj-btn-outline:hover{ border-color: var(--plj-blue); color: var(--plj-blue); }
.plj-btn-small{
  height: 36px; padding: 0 12px; border: 1px solid var(--plj-line); border-radius: var(--plj-radius);
  background: #fff; color: var(--plj-ink-soft); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.plj-btn-small:hover{ color: var(--plj-blue); border-color: var(--plj-blue); }
.plj-btn:focus-visible, .plj-btn-small:focus-visible, .plj-icon:focus-visible{
  outline: 2px solid var(--plj-blue); outline-offset: 2px;
}

/* ---------- Listas de móveis e portas ---------- */
.plj-list{ display: flex; flex-direction: column; gap: 7px; margin-top: 16px; }
.plj-list:empty{ display: none; }
.plj-list-item{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--plj-line); padding: 8px 9px; font-size: 13px;
}
.plj-list-item strong{ display: block; font-size: 14px; overflow-wrap: anywhere; }
.plj-list-item small{ color: var(--plj-ink-soft); font-size: 13px; }
.plj-list-actions{ display: flex; gap: 6px; flex-shrink: 0; }
.plj-icon{
  min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--plj-line-strong); border-radius: var(--plj-radius);
  background: #fff; color: var(--plj-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.plj-icon:hover{ color: var(--plj-blue); border-color: var(--plj-blue); }

/* ---------- Área da planta ---------- */
.plj-canvas{ border: 1px solid var(--plj-line); background: #fff; padding: 20px; min-height: 460px; }
.plj-canvas-head{
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; color: var(--plj-ink-soft); font-size: 13px;
}
.plj-canvas-head b{ color: var(--plj-ink); }
.plj-head-right{ display: flex; align-items: center; gap: 12px; }
.plj-floor{
  display: flex; justify-content: center; align-items: center; min-height: 390px;
  overflow: auto; border: 1px solid var(--plj-line); background: #fcfcfe;
}
.plj-empty{ margin: 0; padding: 42px; color: var(--plj-ink-soft); text-align: center; max-width: 34ch; }

.plj-svg{ display: block; max-width: 100%; height: auto; touch-action: none; }
.plj-grid{ stroke: #eef0f4; stroke-width: 1; }
.plj-wall{ stroke: var(--plj-ink); stroke-width: 2; stroke-linecap: square; }
.plj-door-leaf{ stroke: var(--plj-ink); stroke-width: 1.5; }
.plj-door-arc{ stroke: var(--plj-ink-soft); stroke-width: 1; fill: none; stroke-dasharray: 3 3; }
.plj-item{ cursor: grab; }
.plj-item.is-dragging{ cursor: grabbing; }
.plj-item-rect{ fill: var(--plj-blue-dim); stroke: var(--plj-blue); stroke-width: 1.5; }
.plj-item.is-dragging .plj-item-rect{ fill: var(--plj-orange-dim); stroke: var(--plj-orange); }
.plj-item-back{ fill: var(--plj-blue); pointer-events: none; }   /* costas do móvel: encosto, cabeceira, fundo */
.plj-item-label, .plj-item-dims{
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
.plj-item-label{ font-size: 11px; font-weight: 600; fill: var(--plj-ink); }
.plj-item-dims{ font-size: 9.5px; fill: var(--plj-ink-soft); }

/* ---------- Selo de encaixe ---------- */
.plj-head-left{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plj-fit{
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 100px;
  font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
.plj-fit-ok{ color: var(--plj-green); background: var(--plj-green-dim); }
.plj-fit-warn{ color: #9a3412; background: var(--plj-orange-dim); cursor: help; }

/* ---------- Alternância 2D / 3D ---------- */
.plj-view-toggle{ display: flex; gap: 8px; margin-bottom: 14px; }
.plj-view-toggle button{
  flex: 1; padding: 11px 0; min-height: 44px; border: 1px solid var(--plj-line); border-radius: var(--plj-radius);
  background: #fff; color: var(--plj-ink-soft); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.plj-view-toggle button:hover{ border-color: var(--plj-blue); }
.plj-view-toggle button[aria-pressed="true"]{ border-color: var(--plj-blue); background: var(--plj-blue-dim); color: var(--plj-ink); }
.plj-view-toggle button:focus-visible, .plj-scene-share:focus-visible{ outline: 2px solid var(--plj-blue); outline-offset: 2px; }

/* ---------- Cena 3D ---------- */
.plj-scene{
  position: relative; height: clamp(320px, 62vh, 520px); overflow: hidden;
  border: 1px solid var(--plj-line); background: #dde5e0;
}
.plj-scene canvas{ display: block; max-width: 100%; }
.plj-canvas{ min-width: 0; }
.plj-scene-msg{ margin: 0; padding: 48px 20px; text-align: center; color: var(--plj-ink-soft); font-size: 14px; }
.plj-scene-hint{
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); max-width: calc(100% - 24px);
  background: rgba(20, 24, 29, .75); color: #f4f4f2; font-size: 12px; text-align: center;
  padding: 6px 12px; border-radius: 20px; pointer-events: none;
}
.plj-scene-share{
  position: absolute; top: 10px; right: 10px; background: #fff; border: 1px solid var(--plj-line);
  border-radius: var(--plj-radius); padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.plj-scene-share:hover{ border-color: var(--plj-blue); color: var(--plj-blue); }

/* ---------- Responsivo ---------- */
@media (max-width: 850px){
  .plj-layout{ grid-template-columns: minmax(0, 1fr); }
  .plj-controls{ display: grid; grid-template-columns: repeat(2, 1fr); }
  .plj-controls .plj-card:first-child{ grid-column: 1 / -1; }
}
@media (max-width: 600px){
  .plj-controls{ display: flex; }
  .plj-canvas{ padding: 14px; min-height: 0; }
  .plj-floor{ min-height: 320px; }
  .plj-row{ gap: 8px; }
}
@media (prefers-reduced-motion: reduce){
  .plj-btn{ transition: none; }
  .plj-btn:active{ transform: none; }
}

/* --- Cômodo de demonstração --------------------------------------------
   Quem chega sem projeto salvo vê um quarto já montado; esta etiqueta deixa
   claro que é exemplo, para ninguém achar que são as próprias medidas.      */
.plj-demo-tag{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--cota, #92400e); background:#fff3d6;
  border:1px solid #e8c77a; padding:1px 8px; border-radius:100px; margin-right:6px;
}