/* =============================================================================
   pormenor-3d.css — vista 3D do pormenor no lugar da imagem (assets/js/pormenor-3d.js).
   Tudo debaixo de .pdr3d para não herdar os estilos gerais da página (label, select…).
   ============================================================================= */
.imagem-col.pdr3d-on { max-height: none; align-items: stretch; flex-direction: column; font-weight: normal; }
.pdr3d-espera { width: 100%; height: 440px; display: grid; place-items: center; background: #eef1f4; border-radius: 8px; color: #5d6873; font-size: 13px; font-weight: normal; }
.pdr3d { width: 100%; display: flex; flex-direction: column; gap: 8px; color: #1d2329; font-family: "Segoe UI", system-ui, sans-serif; }
.pdr3d-palco { position: relative; width: 100%; height: 440px; border-radius: 8px; overflow: hidden; background: #eef1f4; }
.pdr3d-palco canvas { display: block; touch-action: none; }
.pdr3d-fios { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.pdr3d-chamada { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: #0b3c5d; color: #fff; border: 2px solid #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; box-shadow: 0 2px 6px rgba(0,0,0,.25); pointer-events: none; }
.pdr3d-cota { position: absolute; transform: translate(-50%, -50%); background: #fff; border: 1px solid #0b3c5d; color: #0b3c5d; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 10px; pointer-events: none; white-space: nowrap; }
.pdr3d-lupa { position: absolute; border: 2px solid #0b3c5d; border-radius: 8px; pointer-events: none; }
.pdr3d-lupa span { position: absolute; left: 6px; top: 5px; background: #0b3c5d; color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 5px; }
.pdr3d-dica { position: absolute; left: 10px; top: 10px; font-size: 11px; color: #5d6873; background: rgba(255,255,255,.85); padding: 3px 8px; border-radius: 6px; pointer-events: none; }
.pdr3d-ferr { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; }
.pdr3d-ferr button { border: 1px solid #d9dee3; background: rgba(255,255,255,.94); color: #1d2329; border-radius: 7px; padding: 6px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.pdr3d-ferr button:hover { border-color: #0b3c5d; }
.pdr3d-opcoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; }
.pdr3d-rotulo { color: #5d6873; font-weight: 600; }
.pdr3d-grupo { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 7px; overflow: hidden; }
.pdr3d-opcoes button { border: 0; background: #fff; color: #1d2329; padding: 6px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.pdr3d-grupo button + button { border-left: 1px solid #cbd5e1; }
.pdr3d-opcoes button[aria-pressed="true"] { background: #0b3c5d; color: #fff; }
.pdr3d-opcoes .pdr3d-alterna { border: 1px solid #cbd5e1; border-radius: 7px; }
.pdr3d-legenda table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; }
.pdr3d-legenda th, .pdr3d-legenda td { text-align: left; padding: 7px 10px; border-top: 1px solid #d9dee3; color: #1d2329; }
.pdr3d-legenda th { background: #eef1f4; font-weight: 600; color: #5d6873; }
.pdr3d-n b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #0b3c5d; color: #fff; font-size: 11px; }
.pdr3d-ref { font-family: Consolas, monospace; font-weight: 600; white-space: nowrap; }
.pdr3d-muda { animation: pdr3d-pisca .9s ease; }
@keyframes pdr3d-pisca { from { background: #fff3c4; } to { background: transparent; } }
.pdr3d-nota { margin: 0; font-size: 11px; color: #64748b; }
@media (max-width: 768px) {
  .pdr3d-palco, .pdr3d-espera { height: 340px; }
  .pdr3d-dica { display: none; }
}