/* ══════════════════════════════════════════════════════════════════
   Nervura — casca no layout do Tekla Structures, fluxo do CYPECAD.
   Cinza claro, azul de interface, densidade alta, cantos retos.
   O laranja fica reservado ao que está SELECIONADO na estrutura —
   é a única cor quente da tela, e por isso o olho vai direto nela.
   ══════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;

  /* ══════════════════════════════════════════════════════════════
     TOKENS NERVURA BIM

     As seis sementes vêm do `UiThemeConfig::default()` do OpenCAD
     Studio, para que o Nervura abra igual ao resto da suíte:

       background #1B1B1D · text #C7D1DB · accent #579DFF
       success    #1F845A · warning #FAA53D · danger #F87168

     O sistema de origem gera as superfícies derivadas (weak/strong)
     a partir dessas seis. Aqui as escadas são explícitas — misturando
     o fundo em direção ao texto em passos curtos — porque CSS não tem
     o gerador do iced, e um degrau escrito à mão é auditável.

     O TEMA CLARO É DERIVADO, e digo isso sem disfarce: a paleta
     Nervura é definida só para fundo escuro. Inverti a escada e
     escureci o azul de acento — #579DFF sobre branco não alcança
     contraste de leitura. As cores semânticas mantêm a matiz.
     ══════════════════════════════════════════════════════════════ */
  --azul:#2E6FD4; --azul-esc:#1F53A8; --azul-claro:#E8F0FC; --azul-borda:#A8C6F0;

  --fundo:#F2F2F3;        /* fita, fundo do app, rodapé */
  --fundo2:#E7E7E9;       /* hover, cabeçalho de tabela, linha alternada */
  --fundo3:#FFFFFF;       /* ÁREA DE DESENHO — branca, como o papel */
  --branco:#FFFFFF;       /* superfície de painel e cartão */
  --linha:#D3D3D6; --linha2:#E4E4E6;
  --texto:#1B1B1D; --texto2:#55555C; --texto3:#82828B;

  /* Campo AFUNDA, botão LEVANTA — a hierarquia que faltava. */
  --campo:#FFFFFF; --campo-borda:#B3B3B8; --campo-foco:var(--azul);
  --botao:#EFEFF0; --botao-hover:#E1E1E4; --botao-borda:#ACACB2;

  --fita:var(--fundo); --painel:var(--fundo); --vista:var(--fundo3);

  /* Semânticas: as mesmas seis sementes, ajustadas para fundo claro. */
  --laranja:#C97A18; --laranja-esc:#9A5C10;   /* warning #FAA53D */
  --verde:#1F845A; --verde-cl:#E7F3EE;        /* success — token exato */
  --amarelo:#9A5C10; --amarelo-cl:#FDF3E4;
  --vermelho:#C4453B; --vermelho-cl:#FBEDEC;  /* danger #F87168 */

  --elev-1:none;
  --elev-2:0 1px 3px rgba(0,0,0,.10);
  --elev-3:0 6px 20px rgba(0,0,0,.20);
  --afundo:none;
  --anel:0 0 0 1px var(--azul);

  --r:0;
  --t:120ms linear;
  --font:'Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'Consolas','SF Mono',monospace;
}

/* ══════════════════════════════════════════════════════════════════
   TEMA ESCURO — os tokens Nervura, sem derivação

   Aqui as seis sementes entram como estão. O fundo #1B1B1D é
   praticamente acromático (R27 G27 B29): a versão anterior tinha
   viés azul de 215° e somava com o azul de interface, deixando a tela
   arroxeada. A escada de superfícies sobe misturando o fundo em
   direção ao texto #C7D1DB, em passos de ~4 %.
   ══════════════════════════════════════════════════════════════════ */
html[data-tema="escuro"]{
  color-scheme:dark;

  --fundo3:#141416;       /* área de desenho — o degrau mais fundo */
  --fundo:#1B1B1D;        /* TOKEN: background */
  --branco:#232326;       /* painel e cartão */
  --fundo2:#2B2B2F;       /* hover, cabeçalho, linha alternada */
  --linha:#35353A; --linha2:#262629;
  --texto:#C7D1DB;        /* TOKEN: text */
  --texto2:#98A2AC; --texto3:#6E767F;

  --campo:#151517; --campo-borda:#3F3F45;
  --botao:#2B2B2F; --botao-hover:#35353A; --botao-borda:#43434A;

  --azul:#579DFF;         /* TOKEN: accent */
  --azul-esc:#7DB4FF; --azul-claro:#1B2B44; --azul-borda:#2F4E7A;

  --laranja:#FAA53D;      /* TOKEN: warning / seleção */
  --laranja-esc:#FFBC6B;
  --verde:#1F845A;        /* TOKEN: success */
  --verde-cl:#16281F;
  --amarelo:#FAA53D; --amarelo-cl:#2C2113;
  --vermelho:#F87168;     /* TOKEN: danger */
  --vermelho-cl:#2E1B19;

  --elev-2:0 1px 3px rgba(0,0,0,.5);
  --elev-3:0 6px 20px rgba(0,0,0,.6);
  --anel:0 0 0 1px var(--azul);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--painel);font-family:var(--font);
  font-size:12.5px;color:var(--texto);overflow:hidden}
button,input,select{font-family:var(--font);font-size:12.5px}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--texto3);border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:var(--fundo2)}

/* A aplicação ocupa a janela inteira; as telas se revezam no corpo. */
.app{height:100vh;display:flex;flex-direction:column}
.telas{flex:1;position:relative;min-height:0}
.tela{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden}
.tela.ativa{display:flex}
.corpo{flex:1;display:flex;min-height:0}

/* ── barra de acesso rápido ── */
.qat{height:28px;background:var(--branco);display:flex;align-items:center;gap:1px;
  padding:0 8px;border-bottom:1px solid var(--linha2);flex-shrink:0}
.qat .marca{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;margin-right:12px}
.qat .marca .glifo{width:15px;height:15px;background:var(--laranja);display:flex;
  align-items:center;justify-content:center}
.qat .marca .glifo svg{width:11px;height:11px}
.qat .ic{width:24px;height:22px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--texto2)}
.qat .ic:hover{background:var(--azul-claro)}
.qat .ic svg{width:14px;height:14px}
.qat .div{width:1px;height:15px;background:var(--linha);margin:0 5px}
.qat .titulo-modelo{margin-left:auto;margin-right:auto;font-size:12px;color:var(--texto2)}
.qat .titulo-modelo b{color:var(--texto);font-weight:600}
.qat .jan{display:flex;margin-left:8px}
.qat .jan div{width:36px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--texto2)}
.qat .jan div:hover{background:var(--linha2)}
.qat .jan .fechar:hover{background:var(--vermelho);color:#FFF}

/* ── fita ── */
.abas-fita{height:26px;background:var(--branco);display:flex;align-items:flex-end;
  padding:0 6px;flex-shrink:0;gap:1px}
.aba-fita{padding:5px 13px;font-size:12px;color:var(--texto2);cursor:pointer;
  border:1px solid transparent;border-bottom:none}
.aba-fita:hover{background:var(--azul-claro)}
.aba-fita.on{background:var(--fita);border-color:var(--linha);color:var(--texto);font-weight:600}
.busca-rapida{margin-left:auto;display:flex;align-items:center;gap:5px;
  padding:0 8px 3px;font-size:11px;color:var(--texto3)}
.busca-rapida input{width:140px;padding:3px 7px;border:1px solid var(--linha);outline:none}

.fita{background:var(--fita);border-bottom:1px solid var(--linha);display:flex;
  padding:6px 8px;flex-shrink:0;height:92px}
.grupo{display:flex;flex-direction:column;padding:0 10px;border-right:1px solid var(--linha2)}
.grupo .itens{flex:1;display:flex;align-items:center;gap:3px}
.grupo .rot{font-size:10px;color:var(--texto3);text-align:center;padding-top:3px}
.cmd{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 7px;
  cursor:pointer;min-width:50px;border:1px solid transparent;font-size:10.5px;
  text-align:center;line-height:1.15}
.cmd:hover{background:var(--azul-claro);border-color:var(--azul-borda)}
.cmd.on{background:var(--azul-borda);border-color:var(--azul)}
.cmd.off{opacity:.4;cursor:default}
.cmd svg{width:24px;height:24px;color:var(--texto2)}
.cmd.pq{flex-direction:row;min-width:0;padding:3px 6px;gap:6px;font-size:11px}
.cmd.pq svg{width:15px;height:15px}
.col{display:flex;flex-direction:column;justify-content:center;gap:1px}

/* ── corpo ── */
.area{flex:1;display:flex;flex-direction:column;min-width:0}

.abas-vista{height:25px;background:var(--painel);border-bottom:1px solid var(--linha);
  display:flex;align-items:flex-end;padding:0 4px;gap:1px;flex-shrink:0}
.aba-vista{padding:4px 12px;font-size:11px;color:var(--texto2);cursor:pointer;
  background:var(--linha);border:1px solid var(--linha);border-bottom:none;
  display:flex;align-items:center;gap:7px;white-space:nowrap}
.aba-vista:hover{background:var(--fundo2)}
.aba-vista.on{background:var(--branco);color:var(--texto);font-weight:600}
.aba-vista .x{color:var(--texto3);font-size:10px}

.vista{flex:1;position:relative;overflow:hidden;background:var(--vista);min-height:0}
.vista.branca{background:var(--fundo)}
.vista.escura{background:var(--fundo3);display:flex;align-items:center;justify-content:center;padding:16px}
.vista svg.cena{position:absolute;inset:0;width:100%;height:100%}
.selo-vista{position:absolute;left:12px;top:10px;font-size:11px;color:var(--texto2);
  background:var(--branco);border:1px solid var(--linha);padding:3px 9px;z-index:2}
.escala-vista{position:absolute;right:14px;bottom:12px;font-size:11px;color:var(--texto2);
  background:var(--branco);border:1px solid var(--linha);padding:3px 9px;z-index:2}
.aviso-grupo{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:7px;
  font-size:11px;color:var(--laranja-esc);background:var(--amarelo-cl);border:1px solid var(--laranja);
  padding:5px 10px;z-index:2}
.aviso-grupo svg{width:14px;height:14px}
.cubo-nav{position:absolute;right:14px;top:14px;width:70px;height:70px;z-index:2}
.eixos-3d{position:absolute;left:12px;bottom:12px;z-index:2}
.folha{width:790px;background:var(--amarelo-cl);box-shadow:0 6px 26px rgba(0,0,0,.5)}
.folha svg{display:block;width:100%;height:auto}

/* barra contextual */
.contextual{position:absolute;background:var(--branco);border:1px solid var(--linha);
  box-shadow:0 3px 12px rgba(0,0,0,.2);display:flex;align-items:center;
  padding:4px 5px;gap:4px;font-size:11px;z-index:3}
.contextual .campo-ctx{display:flex;align-items:center;gap:4px;padding:0 4px}
.contextual .campo-ctx label{color:var(--texto3);font-size:10.5px}
.contextual input{padding:3px 5px;border:1px solid var(--linha);outline:none;font-size:11px}
.contextual .un{color:var(--texto3);font-size:10px}
.contextual .sep{width:1px;height:18px;background:var(--linha)}
.contextual .bic{width:24px;height:22px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;color:var(--texto2)}
.contextual .bic:hover{background:var(--azul-claro)}
.contextual .bic svg{width:14px;height:14px}
.seta-ctx{position:absolute;width:0;height:0;border:7px solid transparent;
  border-top-color:var(--linha);left:34px;bottom:-14px}

/* ── painel lateral ── */
.lateral{width:270px;flex-shrink:0;background:var(--painel);border-left:1px solid var(--linha);
  display:flex;flex-direction:column;min-height:0}
.lateral.larga{width:430px}
.lateral .cab{height:28px;background:var(--branco);border-bottom:1px solid var(--linha);
  display:flex;align-items:center;padding:0 10px;font-size:12px;font-weight:600;flex-shrink:0}
.lateral .cab .x{margin-left:auto;color:var(--texto3);cursor:pointer}
.lateral .conteudo{flex:1;overflow-y:auto;padding:10px}
.lateral .conteudo.sem-pad{padding:0}
.tira{width:34px;flex-shrink:0;background:var(--branco);border-left:1px solid var(--linha);
  display:flex;flex-direction:column;align-items:center;padding-top:5px;gap:2px}
.tira .b{width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--texto2);border:1px solid transparent}
.tira .b:hover{background:var(--azul-claro)}
.tira .b.on{background:var(--azul-borda);border-color:var(--azul-borda);color:var(--azul-esc)}
.tira .b svg{width:16px;height:16px}
.tira .div{width:20px;height:1px;background:var(--linha);margin:4px 0}

.sec{margin-bottom:13px}
.sec .tit{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--texto3);
  font-weight:600;padding-bottom:4px;border-bottom:1px solid var(--linha);margin-bottom:8px;
  display:flex;align-items:center;gap:6px}
.sec .tit svg{width:13px;height:13px}
.prop{display:flex;align-items:center;gap:7px;margin-bottom:6px;font-size:11.5px}
.prop .cx{width:12px;height:12px;border:1px solid var(--campo-borda);background:var(--campo);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;color:#FFF}
.prop .cx.on{background:var(--azul);border-color:var(--azul)}
.prop label{width:96px;color:var(--texto2);flex-shrink:0}
.prop input,.prop select{flex:1;min-width:0;padding:3px 6px;border:1px solid var(--campo-borda);
  background:var(--campo);color:var(--texto);outline:none;font-size:11.5px}
.prop input:focus,.prop select:focus{border-color:var(--campo-foco);box-shadow:var(--anel)}
.prop .un{width:38px;color:var(--texto3);font-size:10.5px;flex-shrink:0}
.valor{flex:1;color:var(--texto);font-weight:600}
.valor.err{color:var(--vermelho)} .valor.ok{color:var(--verde)}
.pe-painel{border-top:1px solid var(--linha);padding:9px 10px;display:flex;gap:6px;flex-shrink:0}
.nota{font-size:10.5px;color:var(--texto3);line-height:1.5;margin:7px 0 0}
.nota-forte{font-size:11.5px;color:var(--laranja-esc);background:var(--amarelo-cl);
  border-left:3px solid var(--laranja);padding:9px 11px;line-height:1.55;margin:10px 0 0}
.dica-calc{font-size:11px;color:var(--texto2);background:var(--azul-claro);
  border:1px solid var(--azul-borda);padding:8px 10px;line-height:1.5;margin:0}
.mut{color:var(--texto3)} .small{font-size:11px}

.bt{padding:5px 14px;border:1px solid var(--botao-borda);background:var(--botao);
  color:var(--texto);cursor:pointer;white-space:nowrap}
.bt:hover{background:var(--botao-hover);border-color:var(--botao-borda)}
.bt.pri{background:var(--azul);border-color:var(--azul);color:#FFF;font-weight:600}
.bt.pri:hover{background:var(--azul-esc)}
.bt.sm{padding:3px 9px;font-size:11px}

/* ── tabelas ── */
.grade-tabela{background:var(--branco);border:1px solid var(--linha);overflow:auto}
.grade-tabela.alta{max-height:430px} .grade-tabela.media{max-height:300px}
table{width:100%;border-collapse:collapse}
thead th{position:sticky;top:0;background:var(--fundo2);text-align:left;font-size:10.5px;
  font-weight:600;color:var(--texto2);padding:7px 10px;border-bottom:1px solid var(--linha);
  border-right:1px solid var(--linha2);white-space:nowrap;cursor:pointer;z-index:1}
thead th:hover{background:var(--fundo)}
thead th.num{text-align:right}
tbody td{padding:6px 10px;font-size:11.5px;border-bottom:1px solid var(--linha2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
tbody td.num{text-align:right;font-family:var(--mono);font-size:11px}
tbody tr:hover{background:var(--fundo2)}
tbody tr.sel{background:var(--azul-claro)}

.selo{display:inline-block;font-size:10px;padding:1px 7px;border:1px solid transparent}
.selo.ok{background:var(--verde-cl);color:var(--verde);border-color:var(--verde)}
.selo.aviso{background:var(--amarelo-cl);color:var(--amarelo);border-color:var(--amarelo)}
.selo.erro{background:var(--vermelho-cl);color:var(--vermelho);border-color:var(--vermelho)}
.selo.info{background:var(--azul-claro);color:var(--azul-esc);border-color:var(--azul-borda)}
.selo.neutro{background:var(--fundo2);color:var(--texto2);border-color:var(--linha)}
.selo.grp{background:var(--amarelo-cl);color:var(--laranja-esc);border-color:var(--laranja)}
.tagg{background:var(--amarelo-cl);color:var(--laranja-esc);border:1px solid var(--laranja);
  padding:1px 6px;font-size:10px}

/* ── painéis de tela cheia ── */
.painel-cheio{flex:1;display:flex;flex-direction:column;min-height:0;padding:16px 20px;gap:14px;overflow-y:auto}
.cab-tela{display:flex;align-items:flex-end;gap:16px}
.cab-tela h1{margin:0 0 3px;font-size:18px;font-weight:600}
.cab-tela p{margin:0;font-size:12px;color:var(--texto2);max-width:640px;line-height:1.5}
.cab-tela .acoes{margin-left:auto;display:flex;gap:7px}
.barra-armaz{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--texto2);
  background:var(--branco);border:1px solid var(--linha);padding:8px 12px}

.passos{display:flex;gap:0;border-bottom:1px solid var(--linha)}
.passo{display:flex;align-items:center;gap:8px;padding:0 20px 10px 0;font-size:12px;
  color:var(--texto3);cursor:pointer}
.passo .n{width:19px;height:19px;border-radius:50%;background:var(--linha);display:flex;
  align-items:center;justify-content:center;font-size:10px;font-family:var(--mono)}
.passo.on{color:var(--azul);font-weight:600}
.passo.on .n{background:var(--azul);color:#FFF}
.passo.feito .n{background:var(--verde-cl);color:var(--verde)}

.form{display:flex;flex-direction:column;gap:14px;max-width:940px}
.bloco{background:var(--branco);border:1px solid var(--linha);padding:14px 16px}
.bloco h3{margin:0 0 12px;font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--texto2);border-bottom:1px solid var(--linha2);padding-bottom:6px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 18px}
.pe-form{display:flex;gap:8px;align-items:center;padding-top:6px}
.pe-form .sp{flex:1}

.fichas{display:flex;gap:10px}
.ficha{border:1px solid var(--linha);background:var(--branco);padding:11px 13px;
  cursor:pointer;flex:1;min-width:0}
.ficha b{display:block;font-size:12.5px;margin-bottom:2px}
.ficha span{display:block;font-size:11px;color:var(--texto2)}
.ficha em{display:block;font-size:10px;color:var(--texto3);font-style:normal;margin-top:5px;
  font-family:var(--mono)}
.ficha.on{border-color:var(--azul);border-width:2px;background:var(--azul-claro)}
.ficha.off{opacity:.45;cursor:default}

.dois{display:grid;grid-template-columns:1fr 300px;gap:14px;align-items:start}
.dois-q{display:grid;grid-template-columns:1fr 290px;gap:14px;align-items:start}
.dois-t{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.elevacao,.secoes-pilar,.quadro-t{background:var(--branco);border:1px solid var(--linha);padding:12px}
.tit-lat{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--texto3);
  font-weight:600;margin-bottom:8px}

.resumo-erros{display:flex;gap:10px;align-items:stretch}
.cx-num{background:var(--branco);border:1px solid var(--linha);padding:10px 16px;
  display:flex;flex-direction:column;min-width:96px}
.cx-num b{font-size:22px;font-family:var(--mono);line-height:1}
.cx-num span{font-size:10.5px;color:var(--texto2);margin-top:3px}
.cx-num.erro b{color:var(--vermelho)} .cx-num.aviso b{color:var(--amarelo)}
.cx-num.info b{color:var(--azul)} .cx-num.ok b{color:var(--verde)}
.expl{flex:1;background:var(--branco);border:1px solid var(--linha);padding:10px 14px;
  font-size:11.5px;color:var(--texto2);line-height:1.55;display:flex;align-items:center}

.sug{background:var(--branco);border:1px solid var(--linha);padding:8px 10px;margin-bottom:6px;cursor:pointer}
.sug:hover{border-color:var(--azul);background:var(--azul-claro)}
.sug b{display:block;font-size:12px}
.sug span{display:block;font-size:10.5px;color:var(--texto2);margin-top:2px}

.chk{font-size:11px;padding:5px 9px;margin-bottom:4px;border-left:3px solid;line-height:1.4}
.chk.ok{background:var(--verde-cl);border-color:var(--verde);color:var(--verde)}
.chk.aviso{background:var(--amarelo-cl);border-color:var(--amarelo);color:var(--amarelo)}

/* ── processamento ── */
.centro-tela{flex:1;display:flex;align-items:center;justify-content:center;background:var(--vista)}
.proc-box{width:560px;background:var(--branco);border:1px solid var(--linha);padding:24px 28px;
  box-shadow:0 3px 14px rgba(0,0,0,.08)}
.proc-box h2{margin:0 0 3px;font-size:15px}
.proc-box .sub{margin:0 0 16px;color:var(--texto2);font-size:11.5px}
.proc-step{display:flex;align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--linha2);font-size:12px;color:var(--texto3)}
.proc-step:last-of-type{border:none}
.proc-step.done{color:var(--texto2)} .proc-step.active{color:var(--texto);font-weight:600}
.proc-step .dot{width:17px;height:17px;border-radius:50%;background:var(--fundo2);display:flex;
  align-items:center;justify-content:center;font-size:9.5px;font-family:var(--mono);flex-shrink:0}
.proc-step.done .dot{background:var(--verde-cl);color:var(--verde)}
.proc-step.active .dot{background:var(--azul-claro);color:var(--azul)}
.proc-step .t{margin-left:auto;font-size:10.5px;color:var(--texto3);font-family:var(--mono)}
.proc-bar{height:5px;background:var(--fundo2);overflow:hidden;margin:16px 0 6px}
.proc-bar .fill{height:100%;background:var(--azul)}
.proc-acoes{display:flex;gap:7px;margin-top:14px;justify-content:flex-end}

/* ── resultados ── */
.painel-diag{position:absolute;inset:0;overflow-y:auto;padding:16px 20px}
.combo-tabs{display:flex;gap:6px;margin-bottom:12px}
.ct{font-size:11px;padding:4px 11px;background:var(--branco);border:1px solid var(--linha);
  cursor:pointer;color:var(--texto2)}
.ct.on{background:var(--azul-claro);border-color:var(--azul);color:var(--azul-esc);font-weight:600}
.cartao-diag{background:var(--branco);border:1px solid var(--linha);padding:12px 14px;margin-bottom:12px}
.cartao-diag .dh{display:flex;align-items:center;margin-bottom:6px}
.cartao-diag .dh b{font-size:12px}
.cartao-diag .dh .val{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--laranja-esc)}

.lista-el .el{display:flex;align-items:center;gap:9px;padding:8px 12px;
  border-bottom:1px solid var(--linha2);cursor:pointer;font-size:11.5px}
.lista-el .el:hover{background:var(--fundo2)}
.lista-el .el.sel{background:var(--azul-claro)}
.lista-el .ic{width:19px;height:19px;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;color:#FFF;flex-shrink:0}
.ic.v{background:var(--azul)} .ic.p{background:var(--texto2)} .ic.l{background:var(--verde)}
.lista-el .n{margin-left:auto;font-size:10px;color:var(--texto3);font-family:var(--mono)}

/* ── editor de vigas ── */
.barra-viga{display:flex;align-items:center;gap:10px;padding:7px 12px;background:var(--branco);
  border-bottom:1px solid var(--linha);font-size:12px;position:relative;z-index:2}
.barra-viga .sp{flex:1}
.cena-viga{position:absolute;left:0;right:0;top:40px;bottom:44px;width:100%;height:calc(100% - 84px)}
.legenda-viga{position:absolute;left:0;right:0;bottom:0;display:flex;gap:20px;padding:8px 14px;
  background:var(--branco);border-top:1px solid var(--linha);font-size:10.5px;color:var(--texto2)}
.legenda-viga i{display:inline-block;width:16px;height:3px;margin-right:6px;vertical-align:middle}

/* ── quantitativos ── */
.cartoes-qt{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.qt{background:var(--branco);border:1px solid var(--linha);padding:12px 15px}
.qt .l{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--texto3);margin-bottom:5px}
.qt b{font-size:23px;font-family:var(--mono);font-weight:600}
.qt .u{font-size:12px;color:var(--texto3);margin-left:4px}
.qt .d{display:block;font-size:10.5px;color:var(--texto2);margin-top:4px}

/* ── pranchas ── */
.lista-pr .pr{display:flex;align-items:center;gap:9px;padding:7px 11px;
  border-bottom:1px solid var(--linha2);cursor:pointer}
.lista-pr .pr:hover{background:var(--fundo2)}
.lista-pr .pr.sel{background:var(--azul-claro)}
.lista-pr .mini{width:30px;height:24px;background:var(--amarelo-cl);border:1px solid var(--linha);flex-shrink:0}
.lista-pr b{display:block;font-size:11.5px;font-family:var(--mono)}
.lista-pr span{display:block;font-size:10.5px;color:var(--texto2)}
.lista-pr i{color:var(--laranja-esc);font-style:normal}

/* ── barra de estado ── */
.estado{flex-shrink:0;background:var(--painel);border-top:1px solid var(--linha)}
.prompt{min-height:23px;display:flex;align-items:center;padding:4px 12px;font-size:11.5px;
  background:var(--amarelo-cl);border-bottom:1px solid var(--linha2);line-height:1.4}
.prompt.alerta{background:var(--vermelho-cl)}
.ferramentas{height:30px;display:flex;align-items:center;padding:0 8px;gap:4px}
.tgrupo{display:flex;align-items:center;gap:1px;padding:0 5px}
/* #swCaptura e #swSelecao são <span> — inline por padrão. Os botões .sw
   lá dentro são display:flex (blocos); blocos dentro de um span inline
   forçam quebra de linha, empilhando os ícones em vez de alinhá-los.
   Foi isto que fazia o grupo crescer para ~110px de altura e invadir a
   linha de comando acima. */
.tgrupo > span{display:flex;align-items:center;gap:1px}
.tgrupo .rot{font-size:9.5px;color:var(--texto3);margin-right:5px;
  text-transform:uppercase;letter-spacing:.03em}
.sw{width:23px;height:22px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:1px solid transparent;color:var(--texto2)}
.sw:hover{background:var(--azul-claro);border-color:var(--azul-borda)}
.sw.on{background:var(--azul-borda);border-color:var(--azul)}
.sw svg{width:14px;height:14px}
.tdiv{width:1px;height:19px;background:var(--linha);margin:0 4px}
.coord{margin-left:auto;display:flex;gap:14px;font-family:var(--mono);font-size:10.5px;
  color:var(--texto2);padding-right:8px}
.coord b{color:var(--texto);font-weight:600}


/* ══════════════════════════════════════════════════════════════════
   PEÇAS QUE SÓ EXISTEM NA APLICAÇÃO REAL
   ══════════════════════════════════════════════════════════════════ */

/* O canvas ocupa a vista inteira. A vista é `flex:1` dentro de `.area`,
   que é `flex:1` dentro de `.corpo`. Nenhuma regra de id pode atingir
   filhos genéricos aqui: foi assim que a barra de ferramentas engoliu
   o canvas na primeira versão. */
.vista canvas{display:block;width:100%;height:100%;cursor:crosshair}

.rib-dir{margin-left:auto;display:flex;align-items:center;gap:10px;padding-right:6px}
.rib-info{font-size:11px;color:var(--texto3);max-width:340px;line-height:1.35}
.rib-info.grupo-ativo{color:var(--laranja-esc)}
.rib-info b{font-weight:600}

.vazio-msg{flex:1;display:flex;align-items:center;justify-content:center;padding:40px}
.vazio-msg p{max-width:400px;text-align:center;color:var(--texto2);line-height:1.7;font-size:13px}

/* avisos flutuantes */
#avisos{position:fixed;right:16px;bottom:60px;display:flex;flex-direction:column;
  gap:8px;z-index:60;max-width:400px}
.aviso-flut{background:var(--branco);border:1px solid var(--linha);
  border-left:3px solid var(--azul);padding:10px 14px;font-size:12px;color:var(--texto);
  box-shadow:0 6px 22px rgba(0,0,0,.22);line-height:1.5;animation:entra .18s ease}
.aviso-flut.erro{border-left-color:var(--vermelho);background:var(--vermelho-cl)}
.aviso-flut.ok{border-left-color:var(--verde);background:var(--verde-cl)}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* obras */
.obras-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.obra-card{background:var(--branco);border:1px solid var(--linha);cursor:pointer;position:relative}
.obra-card:hover{border-color:var(--azul);box-shadow:0 2px 8px rgba(0,99,163,.14)}
.obra-card .capa{height:104px;background:var(--fundo);border-bottom:1px solid var(--linha2);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.obra-card .capa svg{width:100%;height:100%}
.obra-card .txt{padding:10px 12px}
.obra-card .nome{font-size:12.5px;font-weight:600;margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.obra-card .meta{font-size:10.5px;color:var(--texto3);display:flex;gap:7px;align-items:center}
.obra-card.nova{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;min-height:180px;border-style:dashed;color:var(--texto3)}
.obra-card.nova:hover{color:var(--azul);border-color:var(--azul);background:var(--azul-claro)}
.obra-card.nova .mais{width:32px;height:32px;border:1px solid var(--linha);
  display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--branco)}
.obra-del{position:absolute;top:7px;right:7px;background:rgba(255,255,255,.92);
  border:1px solid var(--linha);width:22px;height:22px;color:var(--texto3);
  cursor:pointer;opacity:0;font-size:12px;line-height:1;padding:0}
.obra-card:hover .obra-del{opacity:1}
.obra-del:hover{color:var(--vermelho);border-color:var(--vermelho)}

/* abas de planta com marca de grupo */
.aba-vista.grupo{background:var(--amarelo-cl);color:var(--laranja-esc)}
.aba-vista.grupo.on{background:var(--branco);color:var(--laranja-esc);font-weight:600}

/* ══════════════════════════════════════════════════════════════════
   PEÇAS DAS TELAS DE FLUXO
   Blocos usados pelo assistente, pelo processamento, pelos resultados
   e pela lista de pendências. Ficam aqui, e não espalhados, para que o
   teste que confere "classe usada × regra existente" continue simples.
   ══════════════════════════════════════════════════════════════════ */

/* campo com sufixo de unidade */
.campo-linha{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.campo-linha input,.campo-linha select{flex:1;min-width:0}

/* lista de pavimentos do assistente */
.floor-list{border:1px solid var(--linha);background:var(--branco);overflow:hidden}
.floor-row{display:flex;align-items:center;gap:12px;padding:7px 12px;
  border-bottom:1px solid var(--linha2);font-size:11.5px}
.floor-row:last-child{border-bottom:none}
.floor-row:hover{background:var(--fundo2)}
.fname{width:150px;font-weight:600}
.fmeta{flex:1;color:var(--texto3);font-family:var(--mono);font-size:11px}

/* processamento */
.proc-lista{margin-bottom:4px}

/* resultados: lista à esquerda, diagramas à direita */
.res-shell{flex:1;display:flex;min-height:0}
.res-main{flex:1;overflow-y:auto;padding:16px 20px;min-width:0}

/* pendências */
.pendencias .pend-item{border-left:3px solid var(--linha);padding:8px 0 8px 12px;
  margin-bottom:9px}
.pendencias .pend-item.erro{border-color:var(--vermelho)}
.pendencias .pend-item.atencao{border-color:var(--amarelo)}
.pend-cab{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.pend-cab b{font-size:11.5px;font-family:var(--mono)}
.pend-item p{margin:0;font-size:11px;color:var(--texto2);line-height:1.55}

/* ══════════════════════════════════════════════════════════════════
   ASSISTENTE DE NOVA OBRA — invólucro próprio
   `telaNovoProjeto` escreve direto nos filhos de `.tela` (não usa
   `.painel-cheio`), porque o rodapé com os botões precisa ficar FIXO
   mesmo quando o passo é mais alto que a janela — é um assistente, não
   uma tela de leitura. Isolado em `.wizard-shell` para não vazar
   padding para `.cab-tela` / `.passos` / `.pe-form`, que as outras seis
   telas reaproveitam dentro de `.painel-cheio`.

   Sem o `.wizard-scroll` no miolo, o rodapé com "Continuar →" ficava
   cortado por trás de `.tela{overflow:hidden}` sempre que o passo 1
   (cinco campos + três blocos) fosse mais alto que a janela — o botão
   existia no DOM, ninguém alcançava. Foi isto que impedia criar obra.
   ══════════════════════════════════════════════════════════════════ */
.wizard-shell{flex:1;min-height:0;display:flex;flex-direction:column}
.wizard-shell .cab-tela{flex-shrink:0;padding:16px 22px 0}
.wizard-shell .passos{flex-shrink:0;padding:0 22px;margin-top:2px}
.wizard-shell .pe-form{flex-shrink:0;padding:13px 22px;border-top:1px solid var(--linha);
  background:var(--painel)}
.wizard-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 22px}
.wizard-scroll .form{padding:16px 0}

/* ══════════════════════════════════════════════════════════════════
   EDITOR DE VIGAS / QUADRO DE PILARES
   `.res-shell`/`.res-main` já resolvem "lista estreita + conteúdo
   largo" (o mesmo padrão de Resultados); só falta fixar a largura da
   lista, que aqui carrega um título além dos itens.
   ══════════════════════════════════════════════════════════════════ */
.editor-shell{align-items:stretch}
.lista-editor{width:260px;flex-shrink:0;overflow-y:auto;padding-right:4px}
.res-main.editor-shell,.editor-shell .res-main{overflow-y:auto}

/* ══════════════════════════════════════════════════════════════════
   PRANCHAS DE DESENHO
   ══════════════════════════════════════════════════════════════════ */
.folha-prancha{background:var(--fundo3);padding:20px;display:flex;justify-content:center;
  border-radius:2px;margin-bottom:14px}
.folha-prancha svg{max-width:960px;box-shadow:0 6px 26px rgba(0,0,0,.45)}

/* ══════════════════════════════════════════════════════════════════
   RESULTADOS — DEFORMADA / ISOVALORES
   ══════════════════════════════════════════════════════════════════ */
.legenda-isovalor{display:flex;align-items:center;gap:8px;padding:8px 4px;font-size:11px;color:var(--texto2)}
.faixa-gradiente{flex:0 0 160px;height:10px;border-radius:2px;border:1px solid var(--linha)}

/* Filtro por tipo de elemento, no alto do painel "Elementos" da tela de
   Resultados. Mesma aparência das abas de combinação; a classe própria
   existe para distingui-lo delas — as duas convivem na mesma tela. */
.filtro-tipos{flex-wrap:wrap;margin-bottom:10px}

/* Tira de pilares do Quadro: a lista horizontal e rolável que substitui
   a coluna lateral — o quadro precisa da largura toda para a tabela de
   lances e a seção transversal. */
.lista-pilares{overflow-x:auto;border:1px solid var(--linha);background:var(--branco)}
.lista-pilares .lista-el{display:flex;min-width:min-content}
.lista-pilares .el{border-bottom:none;border-right:1px solid var(--linha2);white-space:nowrap}

/* ══════════════════════════════════════════════════════════════════
   ÁRVORE DA OBRA — o catálogo de vistas, no painel lateral

   O ponto azul marca o que já está aberto numa aba. Sem ele, a árvore
   não distingue "existe" de "está na tela", e reabrir o que já estava
   aberto vira um clique que aparentemente não faz nada.
   ══════════════════════════════════════════════════════════════════ */
.no-arvore{display:flex;align-items:center;gap:7px;padding:3px 4px;cursor:pointer;
  font-size:11.5px;color:var(--texto3)}
.no-arvore:hover{background:var(--fundo2)}
.no-arvore.sel{background:var(--azul-claro)}
.no-arvore.aberta{color:var(--texto)}
.no-arvore .ponto{width:5px;height:5px;border-radius:50%;background:transparent;flex-shrink:0}
.no-arvore.aberta .ponto{background:var(--azul)}
.no-arvore .rot{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.no-arvore .rot.grupo{color:var(--laranja-esc)}

/* O painel lateral usa o mesmo fundo da área de desenho: a borda
   esquerda já separa as duas regiões, e o cinza só somava peso. */
.lateral{background:var(--fundo)}

/* A vista escura (prancha) precisa rolar quando a folha é maior que a área. */
.vista.escura{overflow:auto;align-items:flex-start}
#palcoVista{position:absolute;inset:0;overflow:auto}

/* ══════════════════════════════════════════════════════════════════
   CRITÉRIOS DE ARMADURA e ELEVAÇÃO DE PILAR
   ══════════════════════════════════════════════════════════════════ */

/* As bitolas são botões que ligam e desligam, não caixas de seleção:
   a decisão é "quais entram no canteiro", e vê-las em bloco é o que
   torna óbvio quando já são bitolas demais. */
.bitolas{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 2px}
.bit{border:1px solid var(--linha);background:var(--branco);padding:4px 9px;font-size:11px;
  cursor:pointer;font-family:Consolas,monospace}
.bit:hover{border-color:var(--azul)}
.bit.on{background:var(--azul);border-color:var(--azul);color:#FFF;font-weight:600}
.bit.off{opacity:.42;cursor:not-allowed}
.bit.off:hover{border-color:var(--linha)}

.mini-sec{border:1px solid var(--linha);background:var(--branco);padding:10px 12px;margin-bottom:12px}
.mini-sec>.h{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--texto2);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.mini-sec>.h svg{width:13px;height:13px}
.faixa-esq{border-left:3px solid var(--azul);background:var(--azul-claro);padding:8px 11px;
  font-size:11px;line-height:1.55;margin:8px 0 0}

.cena-pilar{display:block;width:100%;height:100%}

/* ══════════════════════════════════════════════════════════════════
   ÍCONES — trava de tamanho

   Ícone estourado é sempre a mesma causa: o SVG herda a altura da linha
   e cresce. Travar aqui, no seletor mais geral, resolve para todos os
   lugares de uma vez — e evita que a próxima tela repita o defeito.
   ══════════════════════════════════════════════════════════════════ */
svg{flex-shrink:0}
.cmd svg{width:20px;height:20px}
.cmd.pq svg{width:15px;height:15px}
.tira .b svg,.qat .ic svg{width:15px;height:15px}
.sec .tit svg,.dh h3 svg,.mini-sec .h svg,.bloco h3 svg{width:14px;height:14px;
  margin-right:6px;vertical-align:-2px}
.ficha svg,.ficha-crit svg{width:16px;height:16px}
.bt svg{width:13px;height:13px;vertical-align:-2px;margin-right:5px}

/* ══════════════════════════════════════════════════════════════════
   DIVISOR REDIMENSIONÁVEL DO PAINEL LATERAL

   O painel é um só para o sistema inteiro, então o punho de arrasto
   também é: quem monta o painel ganha o divisor de graça. Sem ele, uma
   tabela de oito colunas obrigava a escolher entre ver o desenho e ver
   os números.
   ══════════════════════════════════════════════════════════════════ */
.lateral{position:relative}
.puxador{position:absolute;left:-3px;top:0;bottom:0;width:7px;cursor:col-resize;z-index:5;
  background:transparent;transition:background var(--t)}
.puxador::after{content:'';position:absolute;left:3px;top:0;bottom:0;width:1px;
  background:transparent;transition:background var(--t)}
.puxador:hover::after,.puxador.arrastando::after{background:var(--azul)}
body.redimensionando{cursor:col-resize;user-select:none}

/* ══════════════════════════════════════════════════════════════════
   ALTERNADOR DE TEMA
   ══════════════════════════════════════════════════════════════════ */
.tema-bt{display:flex;align-items:center;gap:5px;border:1px solid var(--linha);
  background:var(--branco);border-radius:var(--r);padding:3px 9px;font-size:11px;
  color:var(--texto2);box-shadow:var(--elev-1)}
.tema-bt svg{width:13px;height:13px}


/* ══════════════════════════════════════════════════════════════════
   COMPONENTES NO PADRÃO AUTODESK

   Plano, denso, canto reto. A separação entre superfícies é feita por
   fio de 1 px — a mesma linguagem da fita do AutoCAD, onde nada
   flutua exceto o que realmente sai do plano de trabalho.
   ══════════════════════════════════════════════════════════════════ */

/* Todo controle de texto herda a superfície de campo, e não a do
   painel. Antes só `.prop input` fazia isso, e os campos das outras
   telas ficavam brancos dentro do tema escuro. */
input,select,textarea{background:var(--campo);color:var(--texto);
  border:1px solid var(--campo-borda);border-radius:0;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--campo-foco);box-shadow:var(--anel)}
input::placeholder{color:var(--texto3)}

button{background:var(--botao);color:var(--texto);border:1px solid var(--botao-borda);
  border-radius:0;cursor:pointer}
button:hover{background:var(--botao-hover)}
.bt.pri{background:var(--azul);border-color:var(--azul-esc);color:#FFF}
.bt.pri:hover{background:var(--azul-esc);border-color:var(--azul-esc)}

/* CANTO RETO EM TODO LUGAR. As abas de vista acompanham as abas da
   fita: mesma forma, mesma leitura, sistema mais coeso. */
.bt,.cmd,.aba-vista,.aba-fita,.bit,.ficha,.ficha-crit,input,select,
.tira .b,.qat .ic,.cx-num,.mini-sec,.bloco,.grade-tabela{border-radius:0}

/* Números em fonte tabular: as colunas de seção e cota alinham por
   dígito, e 20×40 abaixo de 20×50 se compara pelo olho, sem ler. */
body{font-feature-settings:'tnum' 1}
td,.valor,.coord b,.num{font-variant-numeric:tabular-nums}

.fita,.qat{box-shadow:none;border-bottom:1px solid var(--linha)}
.lateral{box-shadow:none;border-left:1px solid var(--linha)}
.vista{box-shadow:none}
.bt{transition:background var(--t),border-color var(--t)}
.bt:hover{transform:none}
.cmd{transition:background var(--t),border-color var(--t),color var(--t)}
.bt:focus-visible,.cmd:focus-visible,.aba-vista:focus-visible{outline:none;box-shadow:var(--anel)}

/* Tabela: fio fino, cabeçalho em superfície de realce, linha
   selecionada com barra de acento à esquerda. */
.grade-tabela table{border-collapse:collapse}
.grade-tabela th{background:var(--fundo2);border-bottom:1px solid var(--linha);
  color:var(--texto2)}
.grade-tabela td{border-bottom:1px solid var(--linha2)}
.grade-tabela tbody tr:hover td{background:var(--fundo2)}
.grade-tabela tbody tr.sel td{background:var(--azul-claro)}
.grade-tabela tbody tr.sel td:first-child{box-shadow:inset 2px 0 0 var(--azul)}


/* ══════════════════════════════════════════════════════════════════
   RESÍDUOS DO TEMA ANTERIOR

   Estes eram azuis fixos escritos direto na regra, de quando só havia
   um tema. No escuro eles ficavam claros dentro de superfície escura —
   os "botões fora de contexto". Agora leem o token.
   ══════════════════════════════════════════════════════════════════ */
.cmd svg{color:currentColor}
.cmd{color:var(--texto2)}
.cmd.on{background:var(--azul-claro);border-color:var(--azul-borda);color:var(--azul-esc)}
.tira .b{color:var(--texto3)}
.tira .b.on{background:var(--azul-claro);color:var(--azul);border-color:var(--azul-borda)}
.vista.escura,.folha-prancha{background:var(--fundo3)}
.selo-vista,.escala-vista{background:var(--branco);border-color:var(--linha);color:var(--texto2)}
.contextual{background:var(--branco);border-color:var(--linha)}
.busca-rapida input{background:var(--campo);border-color:var(--campo-borda);color:var(--texto)}
.qat .ic{color:var(--texto2)}
.qat .ic:hover{background:var(--fundo2)}
kbd{background:var(--fundo2);border:1px solid var(--linha);color:var(--texto2)}
::-webkit-scrollbar-thumb{background:var(--texto3)}
::-webkit-scrollbar-track{background:var(--fundo2)}


/* ══════════════════════════════════════════════════════════════════
   SELOS E VERIFICAÇÕES

   As bordas eram claras fixas, de quando só havia um tema: no escuro
   ficavam mais claras que o preenchimento e o selo virava um retângulo
   brilhante. Agora a borda é a própria cor semântica, com o fundo na
   variante suave — o mesmo par nos dois temas.
   ══════════════════════════════════════════════════════════════════ */
.selo,.tagg,.chk{border-width:1px;border-style:solid}
.chk.ok{color:var(--verde)}
.chk.aviso{color:var(--amarelo)}

/* Realce curto ao chegar numa seção por comando da fita. Some sozinho:
   destaque permanente vira sujeira. */
.realce{box-shadow:inset 3px 0 0 var(--azul);transition:box-shadow 400ms linear}

/* ══════════════════════════════════════════════════════════════════
   VISOR DE ÁREAS DE ARMADURA

   Embaixo da elevação, e não numa aba: ele existe para ser olhado
   ENQUANTO se arrasta a barra.
   ══════════════════════════════════════════════════════════════════ */
.visor-areas{border-top:1px solid var(--linha);background:var(--branco);margin-top:6px}
.visor-areas .cab{display:flex;align-items:center;gap:8px;padding:5px 11px;font-size:10.5px;
  color:var(--texto2);border-bottom:1px solid var(--linha2)}
.visor-areas .cab .x{color:var(--texto3);cursor:pointer}
.visor-areas .nota{padding:14px 11px;margin:0}
.visor-areas .seg{display:flex;border:1px solid var(--linha)}
.visor-areas .seg div{padding:2px 9px;font-size:10.5px;cursor:pointer;color:var(--texto2)}
.visor-areas .seg div.on{background:var(--azul-claro);color:var(--azul-esc);font-weight:600}

/* Documento dentro de uma aba de vista: só conteúdo, rolável. A tira,
   a barra de estado e o painel são os da modelagem. */
.doc-embutido{position:absolute;inset:0;overflow:auto;background:var(--branco);padding:14px 16px}
.grade-tabela tbody tr.reforco td{font-style:italic}
.grade-tabela tbody tr.reforco td:first-child{box-shadow:inset 2px 0 0 var(--laranja)}

/* Editor de elevação: canvas com câmera, como a planta. O esquema é
   fundo travado; o que se desenha é o ferro. */
.canvas-elevacao{position:absolute;inset:0;width:100%;height:100%;display:block;
  background:var(--branco);cursor:default}
.prop .seg{display:flex;border:1px solid var(--linha);flex:1;min-width:0}
.prop .seg div{flex:1;padding:3px 6px;font-size:10.5px;text-align:center;cursor:pointer;
  color:var(--texto2);border-right:1px solid var(--linha)}
.prop .seg div:last-child{border-right:none}
.prop .seg div.on{background:var(--azul-claro);color:var(--azul-esc);font-weight:600}

/* ══════════════════════════════════════════════════════════════════
   DIÁLOGO SOBRE O MODELO

   Não é modal: o projeto continua visível atrás, porque é justamente o
   efeito da mudança que se quer ver enquanto se ajusta.
   ══════════════════════════════════════════════════════════════════ */
.dlg-fundo{position:absolute;inset:0;background:rgba(15,23,33,.22);display:flex;
  align-items:center;justify-content:center;z-index:30}
.dlg{background:var(--branco);border:1px solid var(--linha);box-shadow:var(--elev-3);
  display:flex;flex-direction:column;max-height:88%;max-width:92%}
.dlg-cab{height:28px;background:var(--fundo2);border-bottom:1px solid var(--linha);
  display:flex;align-items:center;justify-content:space-between;padding:0 10px;
  font-size:11.5px;flex-shrink:0}
.dlg-cab .x{color:var(--texto3);cursor:pointer;padding:0 2px}
.dlg-cab .x:hover{color:var(--vermelho)}
.dlg-corpo{display:flex;min-height:0;flex:1;overflow:hidden}
.dlg-lado{width:132px;background:var(--fundo);border-right:1px solid var(--linha);
  padding-top:6px;overflow:auto;flex-shrink:0}
.dlg-lado div{padding:6px 12px;font-size:11.5px;color:var(--texto2);cursor:pointer;
  border-left:3px solid transparent}
.dlg-lado div:hover{background:var(--fundo2)}
.dlg-lado div.on{background:var(--branco);color:var(--texto);font-weight:600;
  border-left-color:var(--azul)}
.dlg-area{flex:1;padding:12px 14px;overflow:auto;min-width:0}
.dlg-pe{border-top:1px solid var(--linha);background:var(--fundo);padding:8px 10px;
  display:flex;gap:7px;justify-content:flex-end;flex-shrink:0}
/* No modo embutido o "painel lateral" da tela vira um rodapé do próprio
   conteúdo: ele não pode disputar espaço com o painel da modelagem. */
.doc-miolo{min-width:0}
.doc-lateral{margin-top:14px;border-top:1px solid var(--linha);padding-top:10px}
.doc-lateral > .h{font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--texto3);margin-bottom:6px}