:root {
  color-scheme: dark;
  --fundo: #0E1418;
  --painel: #141B21;
  --linha: #232D36;
  --texto: #E7ECF2;
  --apagado: #8A97A6;
  --azul: #2E7BFF;
  --ciano: #22D3EE;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; background: var(--fundo); color: var(--texto);
  font: 14px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow: hidden;
}

body { display: flex; }

/* ------------------------------------------------------------------ painel */

/* A largura chama-se --larguraPainel e nao --painel: --painel ja e a COR do
   painel, e um "width: #141B21" e invalido -- o painel ficava com a largura do
   conteudo e nada dizia porque. */
#painel {
  width: var(--larguraPainel, 320px); flex: 0 0 var(--larguraPainel, 320px);
  height: 100%; overflow-y: auto;
  background: var(--painel); border-right: 1px solid var(--linha);
  padding-bottom: 30px;
}

/* Duas linhas, não uma: com o logo + título + lotação já a ocupar quase todo
   o painel (320px de largura), 4 botões de ação a 30px cada não cabiam ao
   lado -- ficavam a transbordar para fora do painel, sem erro nenhum a
   avisar (foi o que aconteceu ao "devolver" entrar como 4º botão). */
#painel header {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px; border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; background: var(--painel); z-index: 3;
}
.cabecalho-linha1 { display: flex; align-items: center; gap: 12px; }
#marca { height: 42px; width: auto; }
#painel header b { display: block; font-size: 15px; letter-spacing: .04em; }
#painel header span { display: block; font-size: 12px; color: var(--apagado); }
/* A versao anda a vista: sem ela, ninguem sabe se o que esta no ecra ja e o
   que foi publicado ha cinco minutos ou o de ontem que ficou no cache. */
#versao { font-style: normal; color: var(--ciano); font-variant-numeric: tabular-nums; }
/* A lotacao existe para se ver de relance numa reuniao, sem ter de rolar o
   painel ate ao rodape onde ja estava escrita. */
.lotacao-topo {
  display: inline-flex !important; align-items: center;
  margin-left: auto;
  font-size: 14px; font-weight: 600; color: var(--ciano);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* A cobertura junto da lotação (●verde/amarelo/vermelho) -- mesmas cores do
   painel "Cobertura dos ecrãs", só que sempre à vista, ligado ou não. Os
   seletores levam o #lotacaoTopo à frente de propósito: "#painel header
   span" (acima) tem um id lá dentro e ganhava à cor por especificidade --
   as três cores saíam todas cinzentas (var(--apagado)), o oposto do que
   se pediu ("usando as cores"). */
.lotacao-topo span { margin-left: 6px; font-size: 12px; }
#lotacaoTopo .cobertura-verde { color: #3ddc84; }
#lotacaoTopo .cobertura-amarela { color: #e0b93d; }
#lotacaoTopo .cobertura-vermelha { color: #e0433d; }
/* O grupo de acoes do cabecalho (sincronizar, auto, devolver, fechar) --
   antes eram 2 botoes com "position: absolute" e a lotacao com um
   "margin-right: 90px" a decorar o espaco a olho. Ao entrar um 3o botao
   (devolver) isso partiu-se: ficava fora do painel, invisivel, sem erro
   nenhum a avisar. Flex normal nao tem esse problema -- cresce sozinho. */
.acoes-topo { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.btn-icone {
  flex: 0 0 30px; width: 30px; height: 30px; padding: 0;
  font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
/* O toggle de sincronizacao automatica so tinha o texto "ON"/"OFF" a dizer
   o estado -- ao encolher para so o icone, isso ficava sem nenhum sinal
   visual. A cor faz agora esse papel (title continua a dizer por extenso). */
#btSincronizacao:not(.desligado) { border-color: var(--azul); color: var(--azul); }
.desligado { opacity: .55; }

#painel section { padding: 16px 18px; border-bottom: 1px solid var(--linha); }
#painel h2 {
  margin: 0 0 12px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--apagado); font-weight: 600;
}

.campos { display: grid; gap: 8px; }
.campos label {
  display: grid; grid-template-columns: 1fr 82px 22px; align-items: center; gap: 8px;
  font-size: 13px; color: var(--apagado);
}
.campos i { font-style: normal; font-size: 12px; color: var(--apagado); }

input[type=number], input[type=text], textarea {
  background: var(--fundo); color: var(--texto); border: 1px solid var(--linha);
  border-radius: 7px; padding: 7px 9px; font: inherit; width: 100%;
}
input[type=number]:focus, input[type=text]:focus, textarea:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
textarea { font-family: Consolas, monospace; font-size: 12px; resize: vertical; }

/* O link de "🔗 Link para ver": um campo só de leitura ao lado do botão de
   copiar -- não usa .campos (isso é para pares rótulo+número). */
.linha-copia { display: flex; gap: 8px; }
.linha-copia input { flex: 1; font-size: 12px; }
.linha-copia button { flex: none; width: auto; padding: 7px 12px; }

.opcao {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font-size: 13px; color: var(--apagado); cursor: pointer;
}

.botoes { display: flex; gap: 8px; margin-top: 8px; }
button {
  flex: 1; font: inherit; color: var(--texto); background: #1E2831;
  border: 1px solid var(--linha); border-radius: 7px; padding: 7px 10px; cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--azul); }
button:disabled { opacity: .42; cursor: default; }
button.primario { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }
button.destaque { border-color: var(--ciano); color: var(--ciano); }

.vistas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

#resumo { font-size: 13px; margin-bottom: 10px; }
#resumo b { color: var(--ciano); font-variant-numeric: tabular-nums; }
.vazio { color: var(--apagado); font-size: 13px; }

/* Um rótulo solto por cima de um campo. O "display:block" vivia no atributo
   style de cada um, e um estilo inline ganha sempre à folha de estilos: com a
   secção dobrada, a regra que esconde o conteúdo (#painel section.fechada >
   *:not(h2)) não lhes chegava, e os dois rótulos da secção Projeto ficavam à
   vista sozinhos, sem o campo a que pertencem. */
.rotulo-campo { display: block; font-size: 13px; color: var(--apagado); }

/* O "?" de cada secção — a mesma ideia do "Como usar esta calculadora" dos
 * Calculadores, trazida para cá: *"está a ficar bem grande o 3D… coloca nas
 * abas de ajuste um help como temos nas calculadoras… até eu me perco já"*.
 *
 * E não é só acrescentar: as explicações que estavam soltas por baixo dos
 * campos, sempre abertas, mudaram-se para dentro destes blocos. O painel
 * fica MAIS CURTO do que estava, e a explicação continua a uma tecla de
 * distância — que era o problema a resolver, não a falta de texto.
 */
.ajuda { margin: 0 0 10px; }
.ajuda summary {
  cursor: pointer; user-select: none; list-style: none;
  font-size: 12px; font-weight: 600; color: var(--apagado);
  display: flex; align-items: center; gap: 7px;
  padding: 5px 0;
}
.ajuda summary::-webkit-details-marker { display: none; }
.ajuda summary::before {
  content: "?";
  flex: none; width: 17px; height: 17px; border-radius: 50%;
  background: var(--linha); color: var(--apagado);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ajuda summary::after {
  content: "▾"; margin-left: auto; color: var(--apagado); font-size: 10px;
}
.ajuda[open] summary::after { content: "▴"; }
.ajuda summary:hover { color: var(--texto); }
.ajuda-corpo {
  font-size: 12.5px; line-height: 1.55; color: var(--apagado);
  padding: 2px 0 4px 24px;
}
.ajuda-corpo p { margin: 0 0 8px; }
.ajuda-corpo p:last-child { margin-bottom: 0; }
.ajuda-corpo b, .ajuda-corpo strong { color: var(--texto); font-weight: 600; }

#resumoCobertura, #resumoDistribuicao { font-size: 13px; line-height: 1.5; }
#listaCoberturaBlocos { font-size: 13px; line-height: 1.5; color: var(--apagado); }
/* As mesmas três cores do mapa de cobertura na cena -- ver CORES_COBERTURA em app.js */
.cobertura-verde { color: #3ddc84; }
.cobertura-amarela { color: #e0b93d; }
.cobertura-vermelha { color: #e0433d; }

#listaZonas .zona {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid #1A222A; font-size: 13px;
}
#listaZonas .zona:last-child { border-bottom: 0; }
#listaZonas .cor { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 12px; }
#listaZonas .med { margin-left: auto; color: var(--apagado); font-variant-numeric: tabular-nums; }

/* As zonas criadas ou trazidas passam a editar-se aqui mesmo -- campos
   pequenos, para a linha continuar a caber sem virar uma folha de cálculo. */
#listaZonas .zona-editavel { flex-wrap: wrap; }
#listaZonas .zona-editavel .cor {
  width: 20px; height: 20px; border-radius: 4px; flex: 0 0 20px;
  border: 1px solid var(--linha); padding: 0; background: none; cursor: pointer;
}
.zona-campo {
  background: var(--fundo); border: 1px solid var(--linha); border-radius: 5px;
  color: var(--texto); font-size: 12px; padding: 3px 5px; font-family: inherit;
}
.zona-nome { width: 84px; flex: 0 1 84px; }
#listaZonas .zona-editavel .med { margin-left: 0; display: flex; align-items: center; gap: 3px; }
/* 52px cortava dígitos de valores com sinal e casas decimais (p.ex.
   "-6,80" na posição ou "-30" na rotação): as setas do campo numérico
   comem uma fatia da caixa que o width não tinha em conta. */
.zona-campo[type=number] { width: 68px; font-variant-numeric: tabular-nums; }
.zona-remover {
  margin-left: auto; flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
  font-size: 13px; background: none; border: 1px solid var(--linha);
}
/* Mesma razão do .ajuste-passo em "Posições": setas nativas do "number"
   não se veem (ou não se tocam bem) em telemóvel nenhum a sério. */
.zona-passo {
  flex: none; width: 24px; height: 24px; padding: 0;
  font-size: 14px; line-height: 1; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

/* Linhas de campos numéricos -- as dos delays/DSM e também as dos palcos,
   régies, passarelas e projetores extra, que antes ficavam de fora por a
   regra estar presa a dois #id. Ver a nota em .ajuste-campo. */
#listaAjustes .ajuste-linha, #listaGomos .ajuste-linha,
#listaPalcosExtra .ajuste-linha, #listaRegiesExtra .ajuste-linha,
#listaPassarelasExtra .ajuste-linha, #listaProjetoresExtra .ajuste-linha {
  padding: 10px 0; border-bottom: 1px solid #1A222A;
  display: flex; flex-direction: column; gap: 6px;
}
#listaAjustes .ajuste-linha:last-child, #listaGomos .ajuste-linha:last-child,
#listaPalcosExtra .ajuste-linha:last-child, #listaRegiesExtra .ajuste-linha:last-child,
#listaPassarelasExtra .ajuste-linha:last-child, #listaProjetoresExtra .ajuste-linha:last-child { border-bottom: 0; }
/* Uma imagem por ecrã: cada linha é só um nome + botões, não uma grelha de
   campos numéricos como as duas de cima -- regras próprias, mais simples. */
#listaConteudoZonas .ajuste-linha {
  padding: 8px 0; border-bottom: 1px solid #1A222A;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
#listaConteudoZonas .ajuste-linha:last-child { border-bottom: 0; }
#listaConteudoZonas .ajuste-linha strong { font-size: 13px; flex: 1 1 auto; min-width: 80px; }
#listaConteudoZonas .ajuste-linha button { flex: none; width: auto; padding: 5px 10px; font-size: 12px; }
#listaConteudoZonas .ajuste-linha i { font-style: normal; font-size: 11px; color: var(--apagado); }
#listaAjustes .ajuste-linha strong, #listaGomos .ajuste-linha strong,
#listaPalcosExtra .ajuste-linha strong, #listaRegiesExtra .ajuste-linha strong,
#listaPassarelasExtra .ajuste-linha strong, #listaProjetoresExtra .ajuste-linha strong { font-size: 13px; }

/* Um campo numérico: o nome em cima, e em baixo −, valor, + e unidade.
 *
 * A regra vive aqui, na própria classe, e NÃO presa a #listaAjustes/
 * #listaGomos como estava. Isso era um bug à espera: as listas dos palcos,
 * régies, passarelas e projetores extra usam o mesmo campoAjuste() e
 * nasceram sem regra nenhuma -- ficavam a "display: inline", cada botão numa
 * linha, e a unidade em itálico colava-se ao nome do campo seguinte. Saía
 * "mprofundidade", "marredondar", "mfundo", "mrodar". Reportado com foto:
 * "os nomes aqui estão estranhos" -- e não estavam, era o layout.
 *
 * O nome vai numa linha própria (e num <span> seu, para deixar de ser um
 * item anónimo da grelha) porque o painel é estreito: com o nome, os dois
 * botões, o campo e a unidade todos na mesma fila, "profundidade" não cabe
 * sem empurrar o resto para fora. As colunas usam minmax(0, 1fr) para o
 * <input> poder encolher -- sem isso, a largura mínima natural de um
 * input[type=number] estoura o painel. */
.ajuste-campo {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px auto auto;
  grid-template-areas:
    "rotulo rotulo rotulo rotulo rotulo"
    "menos  valor  mais   calc    unidade";
  align-items: center; gap: 6px;
  font-size: 12px; color: var(--apagado);
}
/* Os atalhos de forma de um palco extra (círculo, meia-lua) e o
   interruptor "só a frente": numa fila própria, porque a linha do palco é
   uma coluna de campos e um botão solto lá dentro ficava a ocupar uma
   linha inteira sozinho. */
.ajuste-formas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ajuste-formas .ajuste-sofrente {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--apagado); cursor: pointer;
}
.ajuste-formas .ajuste-sofrente input { width: auto; }

.ajuste-campo .ajuste-rotulo { grid-area: rotulo; }
.ajuste-campo > input { grid-area: valor; min-width: 0; }
/* Os dois botões de passo são o 1.º e o 2.º <button> do campo; o 3.º,
   quando existe, é o da calculadora, que o calc-widget insere antes da
   unidade. Sem lugar próprio na grelha ele caía numa linha implícita e
   aparecia sozinho debaixo do campo. */
.ajuste-campo > button:nth-of-type(1) { grid-area: menos; }
.ajuste-campo > button:nth-of-type(2) { grid-area: mais; }
.ajuste-campo > .calcw-btn { grid-area: calc; }
.ajuste-campo > i { grid-area: unidade; font-style: normal; font-size: 12px; color: var(--apagado); }
/* As setas nativas do "number" não se veem (ou não se tocam bem) em
   telemóvel -- isto é o substituto, sempre visível, do tamanho de um dedo. */
.ajuste-passo {
  flex: none; width: 30px; height: 30px; padding: 0;
  font-size: 16px; line-height: 1; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

#rodape { padding: 14px 18px; color: var(--apagado); font-size: 12px; }

/* -------------------------------------------------------------------- cena */

main { flex: 1; position: relative; min-width: 0; }
#tela { display: block; width: 100%; height: 100%; }

#etiquetas { position: absolute; inset: 0; pointer-events: none; }
#etiquetas span {
  position: absolute; transform: translate(-50%, -50%);
  background: rgba(14, 20, 24, .82); border: 1px solid var(--linha);
  border-radius: 6px; padding: 3px 8px; font-size: 12px; white-space: nowrap;
  color: var(--texto);
}

#aviso, #avisoDeposito {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: #3A2318; border: 1px solid #6B3F26; color: #FFC59B;
  padding: 9px 14px; border-radius: 8px; font-size: 13px; display: none;
  max-width: 70%;
}
/* O do depósito fica por cima do outro, para os dois caberem quando calha
   aparecerem ao mesmo tempo — e não desaparece sozinho, porque o material
   também não se monta sozinho. */
#avisoDeposito { bottom: 70px; }
#aviso.mostra, #avisoDeposito.mostra { display: block; }
#aviso .aviso-link, #avisoDeposito .aviso-link {
  color: inherit; text-decoration: underline; cursor: pointer;
  font: inherit; font-weight: 600; background: none; border: none; padding: 0;
}
#aviso .aviso-link:hover, #avisoDeposito .aviso-link:hover { color: #FFDFC7; }

@media (max-width: 820px) {
  body { flex-direction: column; }
  #painel { width: 100%; flex: 0 0 46%; border-right: 0; border-bottom: 1px solid var(--linha); }
  main { flex: 1; }

  /* O painel tem dezenas de campos, e um telemóvel tem uma regra sem
     exceções: um campo com menos de 16px faz o Safari saltar sozinho para o
     zoom ao tocar-lhe, e volta a saltar para trás ao sair — é o "andar a
     navegar nos zooms". Aqui ficavam a 12-13px. No computador o painel
     continua denso; isto é só para dedo, não para rato. */
  input[type=number], textarea, select.escolha { font-size: 16px; }

  /* E uma caixa de 13px de lado não se acerta com um dedo — o alvo mínimo
     que a Apple e a Google pedem anda nos 44px; isto não vai lá, mas sai da
     zona de "só com unha". */
  input[type=checkbox] { width: 20px; height: 20px; }
}

/* ------------------------------------------------- esconder o painel */

/* "position: relative" aqui pisava o "sticky" da regra lá em cima -- e o
   cabeçalho, com a versão e agora a lotação, deixava de acompanhar o scroll
   do painel. */
#painel header { position: sticky; top: 0; z-index: 5; }
#btAbrir {
  position: absolute; left: 12px; top: 12px; z-index: 4; width: 38px; height: 38px;
  padding: 0; font-size: 17px; display: none;
  background: rgba(20, 27, 33, .9);
}
body.fechado #painel { display: none; }
body.fechado #btAbrir { display: block; }

/* Um link "🔗 Link para ver" (modoVisualizacao, js/app.js): painel todo
   escondido, e sem maneira nenhuma de o reabrir nem de ligar a edição livre
   -- ao contrário de "fechado" acima, que é só o painel encolhido por quem
   está a trabalhar e volta a abrir-se a qualquer momento. */
body.modo-ver #painel, body.modo-ver #btAbrir, body.modo-ver #btEdicaoLivre { display: none; }

/* O cadeado da edição livre -- sempre visível (ao contrário do #btAbrir,
   que só aparece com o painel escondido): é precisamente enquanto se olha
   para a cena, painel aberto ou não, que se corre o risco de arrastar algo
   sem querer só por estar a tentar rodar a vista. */
#btEdicaoLivre {
  position: absolute; right: 12px; top: 12px; z-index: 4; width: 38px; height: 38px;
  padding: 0; font-size: 17px;
  background: rgba(20, 27, 33, .9);
}
/* Antes só mudava a cor do contorno/ícone -- pouco visível com o cadeado
   tão pequeno (a diferença entre 🔒 e 🔓 quase não se nota a este
   tamanho). Preenchido a cheio com a cor de destaque, como os outros
   botões "ligados" da app (ver button.primario), dá para ver de relance,
   sem ter de reparar no ícone. */
#btEdicaoLivre.ligada { background: var(--azul); border-color: var(--azul); color: #fff; }

/* Sempre visível, junto ao cadeado — pedido direto: rodar/afastar de
   mais na cena (roda do rato, arrastar) e perder a sala de vista de todo
   não devia obrigar a ir procurar "Vista → Frente" lá na secção, ainda
   por cima só visível com o painel aberto e a secção desdobrada. */
#btRecentrarVista {
  position: absolute; right: 58px; top: 12px; z-index: 4; width: 38px; height: 38px;
  padding: 0; font-size: 16px;
  background: rgba(20, 27, 33, .9);
}

/* Nome do projeto sempre visível na cena — pedido direto: com o painel
   fechado ou uma secção qualquer aberta, não havia forma de saber, só de
   olhar para a cena, em qual projeto se estava a trabalhar. Centrado no
   topo para não disputar canto nenhum com os botões (cadeado/repor vista
   à direita, "mostrar painel" à esquerda). Escondido (via [hidden], não
   display:none à parte) sempre que não há projeto — não há nome nenhum
   para mostrar. */
#nomeProjetoViewport {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 4;
  max-width: min(70vw, 480px); padding: 7px 16px; border-radius: 8px;
  background: rgba(20, 27, 33, .9); border: 1px solid var(--linha);
  color: var(--texto); font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}

#cauda { padding: 14px 18px 24px; display: flex; flex-direction: column; gap: 10px; }
#cauda .ligacao { color: var(--azul); text-decoration: none; font-size: 13px; }
#cauda .ligacao:hover { text-decoration: underline; }
#btInstalar { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }
#comoInstalar { line-height: 1.45; }

@media (max-width: 820px) {
  #btAbrir { left: 10px; top: 10px; }
}

/* ------------------------------------------------- dobrar as secções
 *
 * O painel cresceu: sala, palco, público, projeção, conteúdo, planta,
 * exportação. Tudo aberto ao mesmo tempo é um metro de scroll para chegar aos
 * botões das vistas. Cada secção fecha-se no título, e fica fechada — quem
 * fecha a projeção uma vez não a quer aberta na sessão seguinte.
 */

#painel h2 {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
}
#painel h2:hover { color: var(--texto); }
/* O número de peças à espera no depósito. Fica no título porque o título é a
   única coisa que continua à vista com a secção dobrada (ver a regra do
   .fechada, mais abaixo) — é o que impede o material de chegar sem ninguém
   dar por ele. Mesmas cores do aviso do canto, que diz o mesmo. */
#painel h2 .contador {
  flex: 0 0 auto;
  background: #3A2318; border: 1px solid #6B3F26; color: #FFC59B;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 7px; border-radius: 999px;
}
#painel h2::before {
  content: ""; flex: 0 0 auto;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transform: rotate(90deg); transform-origin: 30% 50%;
  transition: transform .15s ease;
}
#painel section.fechada h2::before { transform: rotate(0deg); }
#painel section.fechada h2 { margin-bottom: 0; }
#painel section.fechada > *:not(h2) { display: none; }

/* Um label escondido continua a ser um grid, e um grid escondido aparece na
   mesma. A regra do hidden tem de ganhar à do .campos. */
.campos label[hidden], #painel [hidden] { display: none !important; }

select.escolha {
  background: var(--fundo); color: var(--texto); border: 1px solid var(--linha);
  border-radius: 7px; padding: 7px 9px; font: inherit; width: 100%;
}
select.escolha:focus { outline: 2px solid var(--azul); outline-offset: -1px; }

/* ------------------------------------------------------- camadas da planta
 *
 * Um DWG de arquitectura traz trinta camadas e um tapete de linhas. A lista
 * é curta de propósito e rola: o que interessa está no princípio, porque
 * ordena-se pela camada com mais linhas.
 */

.camadas-topo {
  display: flex; justify-content: space-between; align-items: center;
  margin: 14px 0 4px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--apagado);
}
#listaCamadas { max-height: 45vh; overflow-y: auto; }
#listaCamadas .camada {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: 12.5px; border-bottom: 1px solid #1A222A;
}
#listaCamadas .camada:last-child { border-bottom: 0; }
#listaCamadas .nome {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--texto);
}
#listaCamadas .quantos { color: var(--apagado); font-variant-numeric: tabular-nums; }
#listaCamadas input[type=checkbox] { margin: 0; flex: 0 0 auto; cursor: pointer; }
#listaCamadas .apagada .nome, #listaCamadas .apagada .quantos { opacity: .45; }

/* ------------------------------------------------------- o painel é elástico
 *
 * Com as camadas de um DWG lá dentro, 320 px deixaram de chegar: um nome de
 * camada cortado com reticências não serve para escolher qual se levanta.
 */

#puxador {
  flex: 0 0 5px; height: 100%; cursor: col-resize;
  background: var(--linha); transition: background .12s;
}
#puxador:hover, body.a-puxar #puxador { background: var(--azul); }
body.a-puxar { cursor: col-resize; user-select: none; }
body.fechado #puxador { display: none; }

@media (max-width: 820px) {
  #puxador { display: none; }
  #painel { width: 100%; flex: 0 0 46%; }
}

/* Um botão a dizer "é aqui" quando a app manda alguém para ele. Três piscadelas
   e cala-se: o que chama a atenção para sempre deixa de a chamar. */
@keyframes apontar {
  0%, 100% { border-color: var(--linha); }
  50% { border-color: var(--ciano); box-shadow: 0 0 0 2px rgba(34, 211, 238, .25); }
}
button.apontado { animation: apontar 1.1s ease-in-out 3; }

/* ------------------------------------------- o que a IA percebeu
 *
 * Isto vive no painel e não no aviso de baixo: um aviso apaga-se ao primeiro
 * campo que se mexa, e as perguntas que a IA devolve são precisamente o que se
 * quer ter à frente enquanto se mexe.
 */

#respostaIA {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  background: #16202A; border: 1px solid var(--linha); font-size: 12.5px;
  line-height: 1.5; color: var(--apagado);
}
#respostaIA b { color: var(--texto); }
#respostaIA ul { margin: 8px 0 0; padding-left: 18px; }
#respostaIA li { margin-bottom: 3px; }
#respostaIA .fechar {
  float: right; margin: -4px -4px 0 6px; padding: 0 6px; font-size: 15px;
  background: none; border: 0; color: var(--apagado); cursor: pointer; flex: none;
}

/* Calculadora simples anexada aos campos de "Posições" (js/calc-widget.js) --
   portada dos Calculadores (mesma razão: sem "-" no teclado numérico de
   muitos telemóveis, só o "±" daqui deixa mesmo chegar a um negativo). */
.calcw-btn {
  width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--apagado); background: none; border: 1px solid var(--linha);
  border-radius: 6px; cursor: pointer;
}
.calcw-btn:hover { color: var(--texto); border-color: var(--azul); }

/* <dialog> nativo (showModal()): promove-se sozinho para o "top layer" do
   browser, por cima de qualquer outro conteúdo. */
#calcw-overlay {
  width: min(300px, 92vw); padding: 0; border: none; background: transparent;
  z-index: 2147483647;
}
#calcw-overlay::backdrop { background: rgba(0, 0, 0, .6); }
#calcw-popup {
  background: var(--painel); border: 1px solid var(--linha);
  border-radius: 14px; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .5);
  padding: 14px;
}
.calcw-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.calcw-expr { font-size: 13px; color: var(--apagado); min-height: 16px; }
.calcw-close {
  flex: none; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; color: var(--apagado);
  background: none; border: 0; border-radius: 6px; cursor: pointer;
}
.calcw-close:hover { color: var(--texto); background: var(--linha); }
.calcw-display {
  font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 600;
  color: var(--texto); text-align: right; padding: 10px 6px; margin-bottom: 12px;
  border-bottom: 1px solid var(--linha); overflow-wrap: break-word; word-break: break-all;
}
.calcw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.calcw-key {
  font-size: 17px; font-weight: 600; color: var(--texto);
  background: #1E2831; border: 1px solid var(--linha); border-radius: 9px;
  padding: 13px 0; cursor: pointer;
}
.calcw-key:hover { background: var(--linha); }
.calcw-key-fn { color: var(--apagado); font-size: 14px; }
.calcw-key-op { color: var(--ciano); }
.calcw-key-eq { background: var(--azul); border-color: var(--azul); color: #fff; }
.calcw-apply { width: 100%; margin-top: 10px; padding: 12px 0; font-size: 14.5px; }