:root {
  --fundo: #e9ebee;
  --painel: rgba(255, 255, 255, 0.88);
  --borda: rgba(20, 24, 28, 0.08);
  --texto: #1b1e22;
  --texto-2: #5d636b;
  --texto-3: #8b9097;
  --acento: #b5651d;
  --acento-suave: rgba(181, 101, 29, 0.12);
  --ativo: #1b1e22;
  --sombra: 0 10px 40px rgba(16, 20, 26, 0.14), 0 1px 3px rgba(16, 20, 26, 0.08);
  --raio: 16px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--fundo);
  color: var(--texto);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

#viewport { position: fixed; inset: 0; }
#viewport canvas { display: block; outline: none; }
.camada-rotulos { position: absolute; inset: 0; pointer-events: none; }

/* ---------- Painel ---------- */
.painel {
  position: fixed;
  top: 16px; left: 16px; bottom: 16px;
  width: 300px;
  display: flex; flex-direction: column;
  background: var(--painel);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  z-index: 10;
  /* clip (e não hidden): o painel não vira contêiner de rolagem, então o foco/scrollIntoView de um controle
     não consegue "rolar" o painel inteiro para fora da área visível (o painel ficava em branco) */
  overflow: hidden;
  overflow: clip;
}
.painel__topo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--borda);
}
.sobretitulo { margin: 0 0 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); font-weight: 600; }
h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.sub { margin: 2px 0 0; font-size: 13px; color: var(--texto-2); }
.btn-recolher {
  font: inherit; font-size: 12px; font-weight: 500;
  border: 1px solid var(--borda); background: #fff; color: var(--texto-2);
  border-radius: 8px; padding: 6px 10px; cursor: pointer;
}
.btn-recolher:hover { color: var(--texto); }

.painel__corpo { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 6px 18px 18px; }
.painel__corpo > section { min-width: 0; }
section { padding: 14px 0 6px; }
h2 { margin: 0 0 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); font-weight: 600; }

/* Vistas */
.grade-vistas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vista, .layout, .paleta, .modulo-bt { min-width: 0; }
.vista {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font: inherit; font-size: 13.5px; font-weight: 600; text-align: left;
  padding: 10px 12px; min-height: 58px;
  border: 1px solid var(--borda); border-radius: 12px;
  background: #fff; color: var(--texto); cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.vista small { font-size: 11.5px; font-weight: 400; color: var(--texto-3); }
.vista:hover { border-color: rgba(20, 24, 28, 0.2); }
.vista:active { transform: scale(.98); }
.vista.ativo { background: var(--ativo); color: #fff; border-color: var(--ativo); }
.vista.ativo small { color: rgba(255, 255, 255, .65); }
.vista--larga { grid-column: 1 / -1; min-height: 50px; }
.tecla { position: absolute; top: 8px; right: 10px; font-size: 10px; font-weight: 500; color: var(--texto-3); }
.vista.ativo .tecla { color: rgba(255, 255, 255, .5); }

/* Layouts */
.layouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } /* atual · A · B · C em 2 × 2 */
.layout {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; line-height: 1.2;
  padding: 9px 9px; border: 1px solid var(--borda); border-radius: 11px; background: #fff; color: var(--texto); cursor: pointer;
}
.layout small { font-size: 10.5px; font-weight: 400; color: var(--texto-3); }
.layout:hover { border-color: rgba(20, 24, 28, 0.2); }
.layout.ativo { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.nota { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--texto-2); }
.h2-nota { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--texto-3); }
.paletas.desativado { opacity: .45; pointer-events: none; }

/* Paletas */
.paletas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.paleta {
  display: flex; align-items: center; gap: 12px;
  font: inherit; text-align: left;
  padding: 9px 10px; border-radius: 12px;
  border: 1px solid var(--borda); background: #fff; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.paleta:hover { border-color: rgba(20, 24, 28, 0.2); }
.paleta.ativo { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.amostras { display: flex; flex-shrink: 0; }
.amostras span {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #fff; margin-left: -7px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
}
.amostras span:first-child { margin-left: 0; }
.paleta__txt { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.paleta__nome { font-size: 13.5px; font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.paleta__desc { font-size: 11.5px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Segmentado */
.segmentado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 3px; gap: 3px; background: rgba(20, 24, 28, .06); border-radius: 11px; }
.seg { font: inherit; font-size: 13px; font-weight: 500; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--texto-2); cursor: pointer; }
.seg.ativo { background: #fff; color: var(--texto); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); font-weight: 600; }

/* Chaves */
.chave { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; cursor: pointer; user-select: none; }
.chave input { position: absolute; left: 0; top: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.trilho { position: relative; flex-shrink: 0; width: 34px; height: 20px; border-radius: 20px; background: rgba(20, 24, 28, .16); transition: background .2s; }
.trilho::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s; }
.chave input:checked + .trilho { background: var(--acento); }
.chave input:checked + .trilho::after { transform: translateX(14px); }
.chave input:focus-visible + .trilho { outline: 2px solid var(--acento); outline-offset: 2px; }

.dica { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--texto-3); }

/* ---------- Rótulos CSS2D ---------- */
.cota { transition: opacity .2s; }
.cota.porta { background: #fff; color: #2f3439; border: 1px solid rgba(47, 52, 57, .35); }
/* fora da planta, as cotas ficam discretas (só as principais, translúcidas e menores) */
.camada-rotulos.discreto .cota { opacity: .55; font-size: 10px; padding: 1px 5px; box-shadow: none; }
.ponto {
  font-family: 'Inter', system-ui, sans-serif; font-size: 10.5px; font-weight: 600; white-space: nowrap;
  padding: 2px 7px 2px 16px; border-radius: 6px; background: rgba(255, 255, 255, .94); color: #2b3036;
  border: 1px solid rgba(0, 0, 0, .12); position: relative; box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.ponto::before { content: ''; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: currentColor; }
.ponto--eletrica::before { background: #d64545; }
.ponto--agua::before { background: #2f86d6; }
.ponto--gas::before { background: #e0a01b; }
.ponto--exaustao::before { background: #8a6fd1; }
.ponto--ventilacao::before { background: #2e9e6b; }
.cota {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: #fff; background: var(--acento);
  padding: 2px 7px; border-radius: 6px; white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.cota.fraca { background: rgba(255, 255, 255, .92); color: var(--acento); border: 1px solid rgba(181, 101, 29, .35); }
.cota.info { background: #2b3036; }
.ambiente {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(40, 44, 50, .75); background: rgba(255, 255, 255, .7);
  padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}

/* ---------- Cartão ---------- */
.cartao {
  position: fixed; right: 16px; bottom: 16px; z-index: 11;
  width: 300px; max-width: calc(100vw - 32px);
  padding: 16px 18px 14px;
  background: var(--painel);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
  animation: subir .2s ease-out;
}
@keyframes subir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cartao__fechar { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--texto-3); cursor: pointer; }
.cartao__tipo { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--acento); font-weight: 600; }
.cartao h3 { margin: 4px 24px 10px 0; font-size: 16px; line-height: 1.3; }
.cartao__medidas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 10px; }
.cartao__medidas div { background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 6px 8px; }
.cartao__medidas dt { font-size: 10.5px; color: var(--texto-3); }
.cartao__medidas dd { margin: 1px 0 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cartao__acab { margin: 0 0 6px; font-size: 12.5px; color: var(--texto-2); }
.cartao__acab:empty { display: none; }
.cartao__desc { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--texto-2); }

/* ---------- Dica caminhar ---------- */
.dica-caminhar {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 12;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 16px; border-radius: 12px;
  background: rgba(20, 22, 26, .82); color: #fff; font-size: 13px; text-align: center;
  max-width: calc(100vw - 32px);
}
.dica-caminhar span { color: rgba(255, 255, 255, .78); font-size: 12px; }
kbd { display: inline-block; min-width: 18px; padding: 0 4px; margin: 0 1px; border-radius: 4px; background: rgba(255, 255, 255, .16); font: 600 11px 'Inter', sans-serif; }
body.travado .dica-caminhar { opacity: .6; }
body.caminhando:not(.travado) canvas { cursor: grab; }
body.caminhando:not(.travado) canvas:active { cursor: grabbing; }
body.travado::after {
  content: ''; position: fixed; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); pointer-events: none; z-index: 20;
}

.carregando {
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 30;
  background: var(--fundo); color: var(--texto-2); font-size: 14px; transition: opacity .4s;
}
.carregando.fora { opacity: 0; pointer-events: none; }

/* ---------- Modo noite ---------- */
body.noite { --fundo: #0e1115; }

/* ---------- Painel recolhido ---------- */
.painel.recolhido { bottom: auto; }
.painel.recolhido .painel__corpo { display: none; }
.painel.recolhido .painel__topo { border-bottom: 0; }

/* ---------- Responsivo ---------- */
@media (max-width: 720px) {
  .painel { top: auto; left: 16px; right: 16px; bottom: 16px; width: auto; max-height: 52vh; }
  .painel.recolhido { bottom: 16px; }
  .painel__topo { padding: 12px 16px 10px; }
  h1 { font-size: 17px; }
  .painel__corpo { padding: 0 16px 14px; }
  .cartao { top: 16px; bottom: auto; right: 16px; left: 16px; width: auto; }
  .tecla { display: none; }
}

/* Render com IA */
.render-bt { width: 100%; border: 1px solid var(--borda); background: var(--ativo); color: #fff; border-radius: 10px; padding: 10px; font: inherit; font-weight: 600; cursor: pointer; }
.render-bt:disabled { opacity: .5; cursor: default; }
.modal-ia { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(10, 12, 16, .45); padding: 16px; }
.modal-ia__caixa { position: relative; width: min(920px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px 22px; }
.modal-ia h3 { margin: 0 0 12px; font-size: 18px; }
.ia-rotulo { display: block; font-size: 12px; color: var(--texto-2); margin: 10px 0 6px; font-weight: 600; }
.ia-link { border: 0; background: none; color: var(--acento); font: inherit; font-weight: 500; cursor: pointer; padding: 0 0 0 6px; }
#ia-prompt, #ia-refino { width: 100%; font: 13px/1.45 'Inter', system-ui, sans-serif; border: 1px solid var(--borda); border-radius: 10px; padding: 10px; resize: vertical; }
.ia-acoes { display: flex; gap: 8px; margin-top: 8px; }
.ia-acoes--linha input { flex: 1; }
.ia-acoes .seg { border: 1px solid var(--borda); background: #fff; white-space: nowrap; }
.ia-status { min-height: 18px; font-size: 13px; color: var(--texto-2); margin: 10px 0; }
.ia-status[data-estado="erro"] { color: #b3261e; }
.ia-status[data-estado="pronto"] { color: #1e7a3c; }
.ia-comparar { --corte: 50%; position: relative; border-radius: 10px; overflow: hidden; background: #ddd; }
.ia-comparar img { display: block; width: 100%; height: auto; }
.ia-camada { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--corte)); }
.ia-camada img { width: 100%; height: 100%; object-fit: cover; }
.ia-selo { position: absolute; right: 10px; bottom: 10px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .55); padding: 3px 8px; border-radius: 6px; }
#ia-deslizar { width: 100%; margin-top: 8px; }
.ia-baixar { text-decoration: none; color: var(--texto); font-size: 13px; padding: 8px 12px; border-radius: 8px; }
.ia-sub { margin: 16px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); }
.ia-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ia-mini { border: 1px solid var(--borda); background: #fff; border-radius: 8px; padding: 4px; cursor: pointer; text-align: left; font: 11px 'Inter', sans-serif; color: var(--texto-2); }
.ia-mini img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 4px; }

/* Marcenaria: lista de módulos e exportação para o CorteCloud */
.cc-bt:disabled { opacity: .45; cursor: default; }
.lista-modulos { display: grid; grid-template-columns: minmax(0, 1fr); overflow-x: hidden; gap: 10px; margin-top: 10px; max-height: 340px; overflow-y: auto; padding-right: 2px; }
.modulos-item { margin: 0 0 4px; font-size: 11px; font-weight: 600; color: var(--texto-3); }
.modulos-grupo { display: grid; gap: 4px; }
.modulo-bt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; text-align: left; padding: 6px 8px; border-radius: 9px;
  border: 1px solid var(--borda); background: #fff; color: var(--texto); cursor: pointer;
}
.modulo-bt:hover { border-color: rgba(20, 24, 28, 0.2); }
.modulo-bt.ativo { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.modulo-cod { flex-shrink: 0; min-width: 44px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; background: var(--ativo); border-radius: 5px; padding: 2px 5px; text-align: center; }
.modulo-bt.ativo .modulo-cod { background: var(--acento); }
.modulo-txt { display: flex; flex-direction: column; min-width: 0; }
.modulo-nome { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modulo-dim { font-size: 11px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.modal-cc__caixa { width: min(640px, 100%); }
.cc-titulo-proj { margin: 0 0 10px; font-size: 13.5px; color: var(--texto-2); }
.cc-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.cc-numeros div { border: 1px solid var(--borda); border-radius: 10px; padding: 8px 10px; font-size: 11.5px; color: var(--texto-3); }
.cc-numeros b { display: block; font-size: 20px; color: var(--texto); font-variant-numeric: tabular-nums; }
.cc-ok { margin: 6px 0; font-size: 12.5px; color: #1e7a3c; }
.cc-alerta { margin: 6px 0; font-size: 12.5px; color: #b3261e; }
.cc-mats { margin: 6px 0 12px; padding-left: 18px; font-size: 12.5px; color: var(--texto-2); }
.cc-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-acoes .render-bt { grid-column: 1 / -1; }
.cc-acoes .seg { border: 1px solid var(--borda); background: #fff; }
.cc-passos { margin: 6px 0 8px; padding-left: 20px; font-size: 13px; line-height: 1.5; color: var(--texto-2); }
@media (max-width: 720px) { .cc-numeros { grid-template-columns: 1fr 1fr; } .cc-acoes { grid-template-columns: 1fr; } }

/* ---------- Aviso de processamento (troca de paleta, layout, alcova, qualidade) ---------- */
.aviso {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 12px; min-width: 260px; max-width: min(520px, calc(100vw - 32px));
  padding: 11px 14px 11px 13px; border-radius: 12px;
  background: rgba(27, 30, 34, .94); color: #fff; box-shadow: var(--sombra);
  font-size: 13px; font-weight: 600; line-height: 1.35;
  animation: aviso-entra .18s ease-out;
}
@media (min-width: 721px) { .painel:not(.recolhido) ~ .aviso { left: calc(50% + 158px); } }
@keyframes aviso-entra { from { transform: translate(-50%, 6px); } to { transform: translate(-50%, 0); } }
.aviso__icone { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: aviso-gira .7s linear infinite; }
@keyframes aviso-gira { to { transform: rotate(360deg); } }
.aviso__corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.aviso__texto { overflow-wrap: anywhere; }
.aviso__etapa { font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, .7); }
.aviso__etapa:empty { display: none; }
.aviso__barra { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; margin-top: 3px; }
.aviso__barra i { display: block; height: 100%; width: 0; background: #e3a467; border-radius: 3px; }
.aviso.ok .aviso__icone { animation: none; border: 0; background: #3f9b62; }
.aviso.ok .aviso__icone::after { content: '✓'; display: block; text-align: center; font-size: 12px; line-height: 18px; color: #fff; }
.aviso.ok .aviso__barra, .aviso.erro .aviso__barra { display: none; }
.aviso.erro { background: #8f2a22; }
.aviso.erro .aviso__icone { animation: none; border: 0; background: #fff; }
.aviso.erro .aviso__icone::after { content: '!'; display: block; text-align: center; font-size: 13px; font-weight: 800; line-height: 18px; color: #8f2a22; }
.aviso__fechar { flex-shrink: 0; border: 0; background: transparent; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; opacity: .8; }
body.ocupado .paleta, body.ocupado .layout, body.ocupado .chave { cursor: progress; }
.paleta:disabled, .layout:disabled, .seg:disabled { opacity: .7; }
.chave:has(input:disabled) { opacity: .75; }
.chave input:disabled + .trilho { opacity: .8; }

/* ---------- Elevações (corte frontal das paredes) ---------- */
.bt-exportar-elev { display: none; margin-top: 8px; width: 100%; }
body.em-elevacao .bt-exportar-elev { display: block; }
.camada-rotulos.elevacao .cota.elev { font-size: 11.5px; padding: 1px 6px; border-radius: 5px; box-shadow: none; opacity: 1; }
.camada-rotulos.elevacao .cota.elev.fraca { background: rgba(255, 255, 255, .95); }
.camada-rotulos.elevacao .cota.elev.porta { background: #fff; color: #2f3439; border: 1px solid rgba(47, 52, 57, .45); }
.camada-rotulos.elevacao .cota.elev.grupo { background: #fff; color: #7a4313; border: 1px solid rgba(181, 101, 29, .55); }
.camada-rotulos.elevacao .cota.elev.info { background: #2b3036; color: #fff; }
.camada-rotulos.elevacao .cota.elev.nome { background: transparent; color: #4a4f56; font-weight: 500; font-size: 10.5px; padding: 0 2px; }
.camada-rotulos.elevacao .cota.elev.titulo { background: transparent; color: #1b1e22; font-size: 15px; font-weight: 700; padding: 0; letter-spacing: .01em; }
.camada-rotulos.elevacao .cota.elev > * { pointer-events: none; }
.cota.elev { display: inline-block; }

/* ---------- Puxadores (indicador) ---------- */
.puxadores { margin-top: 10px; }
.puxadores__rot { margin: 8px 0 4px; font-size: 11.5px; font-weight: 600; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; }
.puxadores .seg:disabled { cursor: default; opacity: .5; }

.modulos-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 6px; }
.modulos-acoes .seg { border: 1px solid var(--borda); background: #fff; }
.cartao { max-height: calc(100vh - 32px); overflow-y: auto; }
.cartao__pecas { margin-top: 10px; border-top: 1px solid var(--borda); padding-top: 8px; }
.cartao__pecas-tit { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; }
.cartao__pecas table { width: 100%; border-collapse: collapse; font-size: 11.5px; line-height: 1.35; }
.cartao__pecas th { text-align: left; font-weight: 600; color: var(--texto-3); padding: 2px 4px 4px 0; }
.cartao__pecas td { padding: 3px 4px 3px 0; border-top: 1px solid rgba(20, 24, 28, .06); vertical-align: top; color: var(--texto-2); }
.cartao__pecas td.n { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cartao__pecas em { display: block; font-style: normal; color: #9a5a1a; font-size: 10.5px; }

/* =====================================================================
 *  MODO EDITOR
 * ===================================================================== */
.bt-editor { margin-top: 8px; background: #1f5fbf; }
.bt-editor:hover { background: #1a52a6; }
.layouts--extra { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px; }
.layouts--extra .layout { overflow-wrap: anywhere; }
body.editando .painel { display: none; }
body.editando #cartao { display: none !important; }
body.editando .dica-caminhar { display: none !important; }
.barra-editor {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 30;
  width: max-content; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
  background: var(--painel); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
}
.be-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.be-titulo { display: flex; align-items: baseline; gap: 8px; margin-right: 4px; min-width: 0; }
.be-sobre { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #1f5fbf; font-weight: 700; }
.be-titulo strong { font-size: 15px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.be-sep { width: 1px; height: 24px; background: var(--borda); margin: 0 2px; }
.be-rot { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); margin-left: 4px; }
.be-chave { padding: 4px 6px; font-weight: 600; }
.ed-selo { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ed-selo.pendente { background: rgba(224, 160, 27, .18); color: #8a5a00; }
.ed-selo.ok { background: rgba(63, 155, 98, .16); color: #256b40; }
.ed-bt {
  font: inherit; font-size: 13.5px; font-weight: 600; min-height: 38px; padding: 8px 13px;
  border: 1px solid rgba(20, 24, 28, .14); border-radius: 10px; background: #fff; color: var(--texto); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center;
}
.ed-bt:hover:not(:disabled) { border-color: rgba(20, 24, 28, .3); }
.ed-bt:disabled { opacity: .45; cursor: default; }
.ed-bt:focus-visible, .ed-seg__bt:focus-visible, .ed-chip:focus-visible { outline: 2px solid #1f5fbf; outline-offset: 2px; }
.ed-bt--forte { background: #1f5fbf; border-color: #1f5fbf; color: #fff; }
.ed-bt--forte:hover:not(:disabled) { background: #1a52a6; }
.ed-bt--perigo { color: #a2271e; }
.ed-bt-alertas.nv-erro { background: #d2342b; border-color: #d2342b; color: #fff; }
.ed-bt-alertas.nv-aviso { background: #fff4d8; border-color: #e0a01b; color: #7a5200; }
.ed-bt-alertas.nv-ok { color: #256b40; }
.ed-seg { display: inline-flex; padding: 3px; gap: 3px; background: rgba(20, 24, 28, .07); border-radius: 11px; flex-wrap: wrap; }
.ed-seg__bt { font: inherit; font-size: 13px; font-weight: 500; min-height: 34px; padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--texto-2); cursor: pointer; }
.ed-seg__bt.ativo { background: #fff; color: var(--texto); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); font-weight: 650; }
/* cartão de edição */
.ed-cartao { top: 132px; bottom: auto; max-height: calc(100vh - 148px); overflow: auto; width: 330px; }
.ed-sub { margin: -4px 0 10px; font-size: 12.5px; color: var(--texto-2); }
.ed-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed-campo { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--texto-2); font-weight: 600; }
.ed-campo--largo { margin: 6px 0 4px; }
.ed-un { display: flex; align-items: center; gap: 5px; font-weight: 500; color: var(--texto-3); }
.ed-campo input { font: inherit; font-size: 15px; font-weight: 650; width: 100%; min-width: 0; padding: 8px 9px; border: 1px solid rgba(20, 24, 28, .16); border-radius: 9px; background: #fff; color: var(--texto); font-variant-numeric: tabular-nums; }
.ed-campo input:focus { outline: 2px solid #1f5fbf; outline-offset: 0; border-color: transparent; }
.ed-campo input:disabled { background: rgba(20, 24, 28, .05); color: var(--texto-3); }
.ed-ajuda { margin: 6px 0 4px; font-size: 11.5px; line-height: 1.4; color: var(--texto-3); }
.ed-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; }
.ed-chip { font: inherit; font-size: 12.5px; font-weight: 650; min-width: 40px; min-height: 32px; padding: 4px 8px; border: 1px solid rgba(20, 24, 28, .14); border-radius: 8px; background: #fff; cursor: pointer; font-variant-numeric: tabular-nums; }
.ed-chip.ativo { background: #1f5fbf; border-color: #1f5fbf; color: #fff; }
.ed-grupo { margin-top: 10px; }
.ed-grupo > p { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
.ed-grupo > p small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ed-chave { margin-top: 6px; }
.ed-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.ed-acoes .ed-bt { font-size: 12.5px; min-height: 36px; padding: 6px 8px; }
.ed-alertas-item { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.ed-alertas-item li { font-size: 12.5px; line-height: 1.4; padding: 6px 8px 6px 26px; border-radius: 8px; position: relative; }
.ed-alertas-item li::before, .ed-lista-alertas li::before { content: ''; position: absolute; left: 9px; top: 11px; width: 9px; height: 9px; border-radius: 50%; }
.ed-alertas-item li.nv-erro, .ed-lista-alertas li.nv-erro { background: rgba(210, 52, 43, .09); color: #8f2a22; }
.ed-alertas-item li.nv-erro::before, .ed-lista-alertas li.nv-erro::before { background: #d2342b; }
.ed-alertas-item li.nv-aviso, .ed-lista-alertas li.nv-aviso { background: rgba(224, 160, 27, .13); color: #6e4b00; }
.ed-alertas-item li.nv-aviso::before, .ed-lista-alertas li.nv-aviso::before { background: #e0a01b; }
/* popovers (catálogo e alertas) */
.ed-pop { position: fixed; top: 132px; left: 50%; transform: translateX(-50%); z-index: 31; width: min(440px, calc(100vw - 24px)); max-height: calc(100vh - 150px); overflow: auto;
  padding: 14px 16px; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.ed-pop__tit { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.ed-pop__sub { margin: 10px 0 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ed-pop__sub.nv-erro { color: #a2271e; } .ed-pop__sub.nv-aviso { color: #8a5a00; }
.ed-pop__nota { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--texto-3); }
.ed-pop__lado { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.ed-pop__lado select { font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(20, 24, 28, .16); }
.ed-cat-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ed-cat-bt { font: inherit; font-size: 13px; font-weight: 600; text-align: left; min-height: 44px; padding: 8px 10px; border: 1px solid rgba(20, 24, 28, .14); border-radius: 10px; background: #fff; cursor: pointer; }
.ed-cat-bt:hover:not(:disabled) { border-color: #1f5fbf; background: rgba(31, 95, 191, .05); }
.ed-cat-bt:disabled { opacity: .4; cursor: not-allowed; }
.ed-lista-alertas { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.ed-lista-alertas li { position: relative; border-radius: 8px; }
.ed-lista-alertas li button, .ed-lista-alertas li span { display: block; width: 100%; font: inherit; font-size: 12.5px; line-height: 1.4; text-align: left; padding: 7px 9px 7px 26px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.ed-lista-alertas li span { cursor: default; }
/* checagem depois de soltar e dica */
.ed-checagem { position: fixed; left: 16px; bottom: 16px; z-index: 32; width: min(420px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.45; box-shadow: var(--sombra); }
.ed-checagem.ok { background: #eaf6ee; color: #1f5a35; border: 1px solid rgba(63, 155, 98, .35); }
.ed-checagem.tem { background: #fdecea; color: #7d231c; border: 1px solid rgba(210, 52, 43, .35); }
.ed-checagem ul { margin: 6px 0 0; padding-left: 18px; }
.ed-checagem p { margin: 4px 0 0; }
.ed-dica { position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 29; padding: 7px 12px; border-radius: 10px; background: rgba(27, 30, 34, .82); color: #fff; font-size: 12.5px; font-weight: 500; max-width: calc(100vw - 32px); text-align: center; pointer-events: none; }
/* modal (salvar com nome / abrir) */
.ed-modal__caixa { width: min(520px, 100%); }
.ed-modal-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ed-modal-acoes--esq { justify-content: flex-start; }
.ed-salvos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ed-salvos li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 10px; }
.ed-salvos__nome { flex: 1; min-width: 0; font-weight: 650; overflow-wrap: anywhere; }
.ed-salvos__nome small { display: block; font-weight: 500; font-size: 11.5px; color: var(--texto-3); }
/* rótulos na cena: cotas ao vivo e alças de largura */
.cota-ed { font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 3px 8px; border-radius: 7px; background: #1f5fbf; color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.cota-ed.folga { background: #fff; color: #1f5fbf; border: 1.5px solid #1f5fbf; }
.cota-ed.erro { background: #d2342b; color: #fff; border-color: #d2342b; }
.cota-ed.folga.erro { background: #fff; color: #d2342b; }
.camada-rotulos.discreto .cota-ed { opacity: 1; }
.alca-ed { pointer-events: auto; width: 18px; height: 46px; border-radius: 9px; background: #fff; border: 3px solid #1f5fbf; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); cursor: ew-resize; touch-action: none; }
.alca-ed:hover { background: #dbe8fb; }
.alca-ed.deitada { width: 46px; height: 18px; cursor: ns-resize; }
@media (max-width: 720px) {
  .barra-editor { top: 6px; padding: 8px; }
  .be-sep { display: none; }
  .ed-cartao { top: auto; bottom: 8px; max-height: 46vh; }
  .ed-pop { top: auto; bottom: 8px; }
}

/* ---------- Camadas (olhos) ---------- */
.camadas {
  position: fixed; top: 16px; right: 16px; z-index: 10; width: 248px;
  background: var(--painel); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra); font-size: 12.5px;
  max-height: calc(100vh - 32px); display: flex; flex-direction: column;
}
.camadas__cab { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--texto); cursor: pointer; text-align: left; }
.camadas__cab small { font-weight: 400; color: var(--texto-3); margin-left: auto; }
.camadas__seta { color: var(--texto-3); transition: transform .2s; }
.camadas.fechado .camadas__seta { transform: rotate(-90deg); }
.camadas.fechado .camadas__corpo { display: none; }
.camadas__corpo { overflow-y: auto; padding: 0 8px 10px; }
.camadas__grupo { margin: 6px 4px 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
.camadas__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 6px; border: 0; border-radius: 8px; background: none; font: inherit; color: var(--texto); cursor: pointer; text-align: left; }
.camadas__item:hover { background: rgba(20, 24, 28, .05); }
.camadas__item:focus-visible, .camadas__cab:focus-visible, .camadas__tudo:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.camadas__item.oculta { color: var(--texto-3); }
.camadas__olho { display: inline-grid; place-items: center; width: 22px; color: var(--texto-2); flex: none; }
.camadas__item.oculta .camadas__olho { color: var(--acento); }
.camadas__tudo { margin: 8px 4px 0; width: calc(100% - 8px); padding: 7px; border: 1px solid var(--borda); border-radius: 9px; background: #fff; font: inherit; font-weight: 500; cursor: pointer; }
.camadas__tudo:hover { border-color: rgba(20, 24, 28, .2); }
body.editando .camadas, body.em-elevacao .camadas { top: auto; bottom: 16px; }
body.editando .camadas:not(.fechado) .camadas__corpo { max-height: 40vh; }
@media (max-width: 720px) { .camadas { top: auto; bottom: 8px; right: 8px; width: 220px; } .camadas__corpo { max-height: 38vh; } }

/* ---------- Planejamento elétrico: rótulos dos pontos e legenda da planta elétrica ---------- */
.rot-eletrica { font: 600 10px/1.2 system-ui, sans-serif; color: #fff; background: rgba(30, 30, 32, 0.82); border-radius: 4px; padding: 1px 5px; white-space: nowrap; pointer-events: none; transform: translateY(-6px); }
.rot-eletrica--tug { background: #b93636; } .rot-eletrica--tue { background: #c46a1c; } .rot-eletrica--il { background: #a8860c; }
.rot-eletrica--int { background: #23794f; } .rot-eletrica--drv { background: #6a54a8; } .rot-eletrica--qdc { background: #2c57b0; }
.rot-eletrica--existente { background: rgba(255, 255, 255, 0.9); color: #444; border: 1px dashed #888; font-weight: 500; }
.legenda-eletrica { position: fixed; right: 16px; bottom: 16px; z-index: 10; max-width: min(430px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; background: rgba(255, 255, 255, 0.96); border: 1px solid #ddd; border-radius: 12px; padding: 12px 14px; font: 12px/1.4 system-ui, sans-serif; color: #222; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); }
.legenda-eletrica ul { list-style: none; margin: 4px 0 8px; padding: 0; }
.legenda-eletrica li { margin: 2px 0; }
.legenda-eletrica__tit { font-weight: 700; font-size: 13px; margin: 0 0 4px; }
.legenda-eletrica__sub { font-weight: 600; margin: 6px 0 2px; }
.legenda-eletrica__circ li { font-size: 11.5px; }
.legenda-eletrica__aviso { margin: 6px 0 0; color: #8a4b00; font-size: 11.5px; }
.le-pt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.le-pt--tue, .le-pt--drv, .le-pt--int, .le-pt--qdc { border-radius: 2px; }
.le-pt--existente { background: transparent; border: 1.5px dashed #777; }
@media (prefers-color-scheme: dark) { .legenda-eletrica { background: rgba(28, 28, 30, 0.95); color: #eee; border-color: #444; } .legenda-eletrica__aviso { color: #f0b46a; } }

.ed-cota-viva { position: fixed; z-index: 60; pointer-events: none; background: #1d1d1f; color: #fff; font: 600 12px/1.3 system-ui, sans-serif; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }

.resumo-eletrica { margin: 8px 0 4px; font-size: 12.5px; line-height: 1.45; }
.resumo-eletrica__tit { font-weight: 600; margin: 0 0 4px; }
.resumo-eletrica ul { margin: 0; padding-left: 18px; }
.le-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; margin-right: 8px; font-size: 13px; vertical-align: middle; }
.le-ic--existente { background: transparent; border: 1.5px dashed #888; color: #888; }
.legenda-eletrica__tipos li { margin: 4px 0; font-size: 13px; }
.legenda-eletrica__resumo { margin: 6px 0; } .legenda-eletrica__resumo summary { font-weight: 600; cursor: pointer; }
.legenda-eletrica__resumo ul { list-style: disc; padding-left: 18px; margin: 4px 0; }
.legenda-eletrica__det { display: block; margin: 8px 0 4px; font-size: 12px; color: #555; cursor: pointer; }
.cartao__detalhes { margin-top: 8px; font-size: 12px; } .cartao__detalhes summary { cursor: pointer; color: #666; }
.cartao__detalhes ul { margin: 4px 0 0; padding-left: 16px; }
.rot-eletrica { font-size: 11px; }
/* site publicado sem o código de edição: aviso de modo só leitura */
.ed-modo-leitura { background: #fff6e0; border-color: #e0b84a; color: #7a5a00; font-size: 12px; }
.ed-modo-leitura[hidden] { display: none; }
.ed-pop__nota.nv-erro { color: #b3261e; }
/* planejamento hidráulico: rótulos e legenda (mesmo padrão da elétrica) */
.rot-hid { font: 600 10px/1.2 system-ui, sans-serif; color: #fff; background: rgba(30, 30, 32, 0.82); border-radius: 4px; padding: 1px 5px; white-space: nowrap; pointer-events: none; transform: translateY(-6px); }
.rot-hid--af { background: #2a6fbd; } .rot-hid--aq { background: #b83232; } .rot-hid--esg { background: #6f533c; } .rot-hid--reg { background: #23794f; }
.rot-hid--ralo { background: #5f5f5f; } .rot-hid--prum { background: #45494d; } .rot-hid--gas { background: #a87406; } .rot-hid--filtro { background: #1d8193; }
.rot-hid--existente { background: rgba(255, 255, 255, 0.9); color: #444; border: 1px dashed #888; font-weight: 500; }
.legenda-hidraulica--lado { right: auto; left: 16px; }