/* =====================================================================
   A FOLHA DO SIMULADOR DE PAREDE  (rt-parede.css)
   ---------------------------------------------------------------------
   Tela cheia, fundo escuro, e o mínimo de interface possível: o cliente
   veio olhar a parede dele, não o site. Tudo o que não for a imagem da
   câmera fica encostado nas bordas.
   ===================================================================== */
.rt-par{
  position:fixed; inset:0; z-index:1200;
  background:#0a1620; color:var(--papel);
  display:flex; flex-direction:column;
}
.rt-par-cx{ display:flex; flex-direction:column; height:100%; }

.rt-par-topo{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; background:rgba(11,35,56,.92); flex:0 0 auto;
  border-bottom:1px solid rgba(217,185,120,.28);
}
.rt-par-topo b{ font-family:var(--serif); font-size:1.05rem; display:block; }
.rt-par-topo span{ font-size:.78rem; color:#bcc9d5; }

/* ---------------- o palco: onde a parede aparece ---------------- */
.rt-par-palco{
  position:relative; flex:1 1 auto; overflow:hidden; background:#101d29;
  touch-action:none;
}
.rt-par-palco video,.rt-par-palco img#rtParFoto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.rt-par-fundo{
  position:absolute; inset:0; display:grid; place-items:center; padding:20px;
  background:linear-gradient(160deg,#12293d,#0a1620);
}
.rt-par[data-passo="calibrar"] .rt-par-fundo,
.rt-par[data-passo="ver"] .rt-par-fundo{ display:none; }

.rt-par-porta{
  display:flex; flex-direction:column; gap:12px; align-items:center;
  max-width:420px; text-align:center;
}
.rt-par-privado{
  font-size:.86rem; color:#c9d4dd; line-height:1.55; margin:0 0 4px;
  border-left:3px solid var(--latao-claro); padding-left:12px; text-align:left;
}

/* ---------------- a caixa da régua ---------------- */
.rt-par-regua{
  position:absolute; border:2.5px dashed #ffd97a; border-radius:3px;
  background:rgba(255,217,122,.10); cursor:move; touch-action:none;
}
.rt-par-regua-n{
  position:absolute; left:50%; top:-26px; transform:translateX(-50%);
  background:#ffd97a; color:#23180a; font-size:.66rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; padding:3px 9px; border-radius:999px;
  white-space:nowrap;
}
.rt-par-canto{
  position:absolute; width:26px; height:26px; border-radius:50%;
  background:#ffd97a; box-shadow:0 2px 6px rgba(0,0,0,.5); cursor:nwse-resize;
}
.rt-par-canto.nw{ left:-13px; top:-13px; }
.rt-par-canto.ne{ right:-13px; top:-13px; }
.rt-par-canto.sw{ left:-13px; bottom:-13px; }
.rt-par-canto.se{ right:-13px; bottom:-13px; }

/* ---------------- o quadro na parede ---------------- */
.rt-par-alvo{
  position:absolute; cursor:move; touch-action:none;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.55));
}
.rt-par-alvo img,.rt-par-alvo .rt-falta{
  width:100%; height:100%; object-fit:cover; display:block;
  border:14px solid #8a6f4e; border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);
  background:var(--papel-2);
}
.rt-par-alvo:focus-visible{ outline:3px solid #ffd97a; outline-offset:6px; }

/* ---------------- o pé, com as instruções ---------------- */
.rt-par-pe{
  flex:0 0 auto; background:rgba(11,35,56,.96); padding:14px 16px
    calc(14px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid rgba(217,185,120,.28);
  max-height:46vh; overflow:auto;
}
.rt-par-instr{ font-size:.86rem; line-height:1.55; color:#d6dee6; margin:0 0 10px; }
.rt-par-instr b{ color:var(--papel); }
.rt-par-recado{
  font-size:.84rem; line-height:1.5; margin:0 0 10px; padding:10px 12px;
  background:rgba(217,185,120,.16); border-left:3px solid #ffd97a; border-radius:0 4px 4px 0;
  color:#f3e7cd;
}
.rt-par-lab{ display:block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:800; color:var(--latao-claro); margin-bottom:8px; }
.rt-par-calib small{ display:block; font-size:.78rem; color:#bcc9d5; margin:8px 0 12px; }
.rt-par-calib .rt-pastilha{ background:transparent; color:var(--papel); border-color:rgba(217,185,120,.4); }
.rt-par-calib .rt-pastilha.marcada{ background:#ffd97a; color:#23180a; border-color:#ffd97a; }

.rt-par-ver{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.rt-par-medida{
  font-family:var(--serif); font-size:1.15rem; color:var(--latao-claro); margin-right:auto;
}

/* quem aparece em cada passo */
.rt-par .rt-par-calib,.rt-par .rt-par-ver{ display:none; }
.rt-par[data-passo="calibrar"] .rt-par-calib{ display:block; }
.rt-par[data-passo="ver"] .rt-par-ver{ display:flex; }

@media (min-width:900px){
  .rt-par-pe{ max-height:30vh; }
}