.solid-commandbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px 0;border-bottom:1px solid var(--line)}.solid-commandbar span{font-size:11px;color:var(--ink-soft);margin:0 5px 0 12px}.solid-commandbar button,.solid-status button,.solid-viewbar button,.solid-tree button,.solid-editor button:not(.btn){background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:8px 10px;cursor:pointer;font:inherit;font-size:12px} .solid-commandbar button[aria-pressed=true]{background:var(--accent-bg);border-color:var(--accent-d)} /* Aviso antes de limpar: fica no fluxo, empurrando a área de trabalho para baixo — some da tela o que vai ser descartado é exatamente o que se quer evitar num aviso destrutivo. */ .solid-confirm{border:1px solid var(--accent-d);border-radius:8px;background:var(--accent-bg);padding:12px 14px;margin:10px 0} .solid-confirm p{margin:0 0 4px;font-size:13px;line-height:1.55;color:var(--ink)} .solid-confirm .cad-mini-actions{padding:6px 0 0} .solid-confirm button:not(.btn){background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:8px 12px;cursor:pointer;font:inherit;font-size:12px} .solid-status{display:flex;align-items:center;gap:12px;min-height:52px;font-size:13px}.solid-status p{flex:1;margin:10px 0}.solid-status .cad-error{color:var(--accent-d);font-weight:700}.solid-status span{color:var(--accent-d)} .solid-layout{display:grid;grid-template-columns:205px 245px minmax(0,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}.solid-layout h3{font-size:15px;margin:12px 0}.solid-tree,.solid-editor{min-width:0;padding:15px;background:var(--surface-2);border-right:1px solid var(--line)}.solid-tree ol{list-style:none;padding:0;margin:15px 0}.solid-tree li{margin:5px 0}.solid-tree button{width:100%;text-align:left;overflow-wrap:anywhere}.solid-tree button.selected{background:var(--accent-bg);border-color:var(--accent-d)}.solid-layout label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink-soft);margin-bottom:12px}.solid-layout input,.solid-layout select,.solid-layout textarea{width:100%;min-width:0;box-sizing:border-box;font-family:var(--mono,monospace)}.solid-editor>.btn{width:100%;margin-top:14px}.solid-editor .cad-mini-actions{padding:10px 0}.solid-canvas{min-width:0;padding:15px}.solid-viewbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.solid-viewbar span{font-size:11px;color:var(--accent-d)} /* Pré-visualização: o aviso acompanha o 3D, não o formulário — é ali que a mudança está sendo mostrada sem ter sido aplicada. */ /* O aviso de pre-visualizacao NUNCA muda a altura da barra. Ele fica acima do 3D: aparecer, sumir ou trocar para um texto mais longo empurrava o canvas alguns pixels -- e o 3D saltava sob o cursor a cada tecla digitada. Linha propria de altura fixa, com reticencias no que nao couber, e escondido por VISIBILIDADE, que nao tira espaco do fluxo. */ .solid-preview{flex:1 0 100%;color:var(--ink-soft);font-size:11px;min-height:1.35em;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .solid-preview[hidden]{display:block;visibility:hidden}#solidViewer{height:450px;min-width:0}#solidSketchWrap{float:right;width:180px;border:1px solid var(--line);border-radius:6px;padding:8px;margin:12px 0 8px 10px;position:relative;z-index:1;background:var(--surface)}/* `none` para o navegador não roubar o gesto de dois dedos: a pinça do esboço é tratada aqui, e com `manipulation` o zoom da PÁGINA entrava no lugar dela. */ #solidSketch{display:block;width:100%;height:170px;touch-action:none;color:var(--ink-soft)}#solidSketchWrap .hint{font-size:10px}.solid-stats{font-family:var(--mono,monospace);font-size:12px;padding:12px 0;border-block:1px solid var(--line)}.solid-compat{font-size:12px;margin:15px 0;color:var(--ink-soft)}.solid-compat summary{cursor:pointer}#solidSaved{font-size:11px;color:var(--ink-soft)}#solidWorkspace button:disabled{opacity:.45;cursor:default}#solidWorkspace button:focus-visible{outline:2px solid var(--accent-d);outline-offset:2px} @media(max-width:1150px){.solid-layout{grid-template-columns:180px 220px minmax(0,1fr)}#solidSketchWrap{float:none;width:auto;max-width:none}#solidSketch{height:200px}} @media(max-width:850px){.solid-layout{grid-template-columns:200px minmax(0,1fr)}.solid-tree{grid-column:1/-1;border-bottom:1px solid var(--line)}.solid-tree ol{display:flex;flex-wrap:wrap;gap:6px}.solid-tree label{max-width:350px}.solid-tree .hint{margin:4px 0}} @media(max-width:560px){.solid-layout{display:block}.solid-editor{border-bottom:1px solid var(--line)}.solid-canvas{padding:10px}.solid-status{flex-wrap:wrap;gap:5px;padding:8px 0}.solid-status p{flex-basis:100%}.solid-commandbar span{margin-left:0}.cad-heading{align-items:flex-start;flex-direction:column;gap:4px}} #solidModelViews{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:10px;margin-top:12px}#solidSketchWrap{float:none;grid-column:2;grid-row:1;align-self:start;box-sizing:border-box;width:100%;margin:0}.solid-viewport{grid-column:1;grid-row:1}#solidViewer{overflow:hidden;border-radius:6px;border:1px solid var(--line)}#solidViewer canvas{display:block;width:100%;height:100%}#solidModelViews>.cad-mini-actions,#solidModelViews>.hint{grid-column:1/-1;margin:0}.solid-layout .hint{font-size:11px;line-height:1.5;color:var(--ink-soft)}.solid-layout textarea,#solidName{background:var(--bg);border:1px solid var(--line-2);border-radius:6px;padding:9px;color:var(--ink)} @media(max-width:1200px){#solidModelViews{grid-template-columns:minmax(0,1fr)}#solidSketchWrap{grid-column:1;grid-row:1}#solidSketch{height:190px}.solid-viewport{grid-column:1;grid-row:2}#solidSketchWrap h3{margin:3px 0}} /* A drafting surface with the same cream/terracotta palette as the workshop. */ #solidSketchTools,.sketch-help{display:none} #solidSketch{background:var(--bg);touch-action:none;border-radius:5px;outline-offset:2px} #solidSketch path,#solidSketch circle,#solidSketch rect,#solidSketch polygon,#solidSketch polyline,#solidSketch line{vector-effect:non-scaling-stroke} #solidSketch .sketch-grid{fill:none;stroke:var(--line);stroke-width:.6;opacity:.4} #solidSketch .sketch-axis{fill:none;stroke:var(--ink-soft);stroke-width:1;stroke-dasharray:7 4} /* Linha de centro (traço-ponto), como em desenho técnico: é o eixo do giro. */ #solidSketch .sketch-revolve-axis{fill:none;stroke:var(--accent-d);stroke-width:1.6;stroke-dasharray:12 3 2 3} #solidSketch .sketch-contour{fill:var(--accent);fill-opacity:.035;stroke:var(--accent-d);stroke-width:1.8} /* B4 — FACE × ARESTAS. Cedido o traço às entidades, o contorno fica só com o preenchimento: ele deixou de ser "os lados" e é a REGIÃO. Dois contornos visíveis sobrepostos seria o pior dos mundos, então a cessão é exclusiva. */ #solidSketch .sketch-contour.so-face{stroke:none} /* O contorno que uma ferramenta de traçado vai SUBSTITUIR: continua à vista como referência, mas apagado — e é ele que deixou de imantar. */ /* ── B3: UM NÓ POR ENTIDADE ─────────────────────────────────────────── Toda entidade do documento tem nó próprio, com o id dela. A ESCOLHA é geométrica (distância em pixel, no editor), então estes nós não precisam receber ponteiro — e não devem: um largo o bastante para ser clicável engoliria o clique destinado à cota ou à relação que passa por cima dele. ── B4: e agora é a ENTIDADE que tem o traço ───────────────────────────── O contorno cedeu o stroke e ficou com o FILL: ele é a FACE. Cada entidade pinta a própria aresta, na cor do estado PARAMÉTRICO dela. A distinção NÃO é só de matiz. Subdefinido é traço fino, definido é traço cheio, conflitante é o mais grosso: quem não separa azul de cinza continua lendo a diferença pela espessura. (É a mesma regra que as alças já seguem, distinguindo livre de definido pelo PREENCHIMENTO e não só pela cor.) */ #solidSketch .sketch-entidade{fill:none;pointer-events:none;stroke-linecap:round} #solidSketch .sketch-entidade.sub-definido{stroke:var(--sketch-sub);stroke-width:1.8} #solidSketch .sketch-entidade.bem-definido{stroke:var(--sketch-def);stroke-width:2.4} #solidSketch .sketch-entidade.conflitante{stroke:var(--sketch-conflito);stroke-width:3} /* Conflito é um SEGUNDO eixo, por cima da definição: o traço continua azul (subdefinido) ou branco (definido) e ganha uma borda vermelha por baixo. Pintar o traço de vermelho escondia a definição — com um conflito em qualquer relação o desenho todo saía da mesma cor. */ /* A linha escolhida como EIXO da revolução: traço-ponto, a convenção da linha de centro — é ela que diz em torno de quê o perfil gira. */ #solidSketch .sketch-entidade.eixo-giro{stroke:var(--accent);stroke-dasharray:10 3 2 3;stroke-width:2} /* Arestas da FACE de suporte: referência, não geometria — tracejado fino e apagado, sem receber ponteiro. */ #solidSketch .sketch-referencia{fill:none;stroke:var(--ink-soft);stroke-width:1.2;stroke-dasharray:6 4;opacity:.8;pointer-events:stroke} /* Entidade CONVERTIDA que perdeu a aresta da face: âmbar tracejado, a mesma cor do "sem alvo" das relações — é o mesmo problema (promessa sem endereço). */ #solidSketch .sketch-entidade.proj-orfa{stroke:var(--sketch-dangling)!important;stroke-dasharray:5 3} #solidSketch .sketch-conflito-fundo{stroke:var(--sketch-conflito);stroke-width:7;stroke-linecap:round;pointer-events:none;vector-effect:non-scaling-stroke} #solidSketch .sketch-entidade.indeterminado{stroke:var(--ink-soft);stroke-width:1.6} /* FORA DO PERFIL é outro eixo, e ele sobrevive à cor: mais fino e mais apagado em qualquer estado. Vem DEPOIS das cores de propósito — mesma especificidade, e é a espessura de fora do perfil que tem de vencer. */ #solidSketch .sketch-entidade.no-perfil{stroke-width:1.3;opacity:.7} /* Contorno com ACABAMENTO DE CANTO não cede o traço: ele vira um path com arcos, e a entidade é um segmento reto que não acompanha a curva. Ali a entidade volta a ser só identidade, como na B3 — e o estado fica com a barra, que é menos do que a B4 promete, mas é verdade. */ #solidSketch .sketch-entidade.sem-traco{stroke:none} /* 🔴 SELEÇÃO e HOVER são HALO POR BAIXO, nunca troca de cor da entidade. Enquanto pintavam o `stroke` dela, escolher uma linha APAGAVA o estado paramétrico — e voltar ao azul ao desselecionar era sorte, não regra. O terracota da marca é o ESTADO ATIVO aqui dentro, como no resto do CAD. */ #solidSketch .sketch-realce{fill:none;pointer-events:none;stroke:var(--sketch-halo);stroke-linecap:round} #solidSketch .sketch-realce.hover{stroke-width:7;opacity:.32} #solidSketch .sketch-realce.selected{stroke-width:9;opacity:.55} #solidSketch .sketch-window{fill:var(--sketch-sub);fill-opacity:.08;stroke:var(--sketch-sub);stroke-width:1;stroke-dasharray:5 3;pointer-events:none} #solidSketch .sketch-preview{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:5 3} #solidSketch .sketch-point,#solidSketch .sketch-origin{fill:var(--accent-d)} #solidSketch .sketch-handle{fill:var(--surface);stroke:var(--accent-d);stroke-width:1.5;cursor:move} #solidSketch .sketch-handle.selected{fill:var(--accent-d);stroke:var(--ink)} /* LIVRE × DEFINIDO. Vazio com contorno de acento = ainda pode se mexer; cheio e escuro = preso pelo que o esboço promete. A distinção é de PREENCHIMENTO, não só de cor: quem não distingue matiz continua vendo a diferença. */ #solidSketch .sketch-handle.livre{fill:var(--surface);stroke:var(--accent-d);stroke-width:1.5} #solidSketch .sketch-handle.definido{fill:var(--ink);stroke:var(--ink)} #solidSketch .sketch-handle.selected{fill:var(--accent-d);stroke:var(--ink)} /* A relação da entidade marcada sobe e se destaca; a redundante se anuncia. */ .sketch-rel-lista li.da-entidade>button{border-color:var(--accent-d);font-weight:600} .sketch-rel-lista .redundante{font-size:.85em;opacity:.75;font-style:italic} /* B4 — a relação POR ATENDER: promessa quebrada pela geometria que está na tela. No canvas ela divide o VERMELHO com a redundante (as duas dizem "há algo errado com o que este lado promete"); aqui na lista ela se separa, com o peso da cor e a palavra própria — é por este painel que ela sai. */ .sketch-rel-lista li.conflitante>button{border-color:var(--sketch-conflito);color:var(--sketch-conflito);font-weight:600} /* SOBREDEFINIDA divide o vermelho com a conflitante no canvas, e guarda a palavra dela: "redundante" não é promessa quebrada — é promessa que não acrescenta posto nenhum, e cuja remoção não muda a geometria. A borda marca, sem o peso da outra: o canvas diz ONDE, a lista diz O QUÊ. */ .sketch-rel-lista li.sobredefinida>button{border-color:var(--sketch-conflito)} .sketch-rel-lista .conflito{font-size:.85em;font-weight:700;text-transform:uppercase;letter-spacing:.04em} /* DANGLING não é "por atender": é promessa que perdeu o ENDEREÇO. Cor de erro própria (âmbar) porque a correção é outra — uma pede geometria, a outra pede exclusão —, e o botão fica fora do ar porque não há alvo para selecionar. */ .sketch-rel-lista li.dangling>button{border-color:var(--sketch-dangling);color:var(--sketch-dangling);font-style:italic} .sketch-rel-lista .dangling{font-size:.85em;font-weight:700;text-transform:uppercase;letter-spacing:.04em} #solidSketch text{fill:var(--ink);font-family:var(--mono);pointer-events:none} /* Cotas: linha de cota, linhas de extensão e setas, como em desenho técnico. O traço é fino de propósito — a cota acompanha o esboço, não compete com ele. */ #solidSketch .sketch-dim-line{fill:none;stroke:var(--accent-d);stroke-width:1} #solidSketch .sketch-dim-ext{fill:none;stroke:var(--accent-d);stroke-width:.7;opacity:.65} #solidSketch .sketch-dim-arrow{fill:var(--accent-d);stroke:none} #solidSketch .sketch-dim-hit{fill:none;stroke:transparent;stroke-width:10;cursor:pointer} /* A PRÉVIA da cota: mesma geometria, mesmo renderizador, traço mais leve e tracejado — ela mostra o que o clique VAI criar, e não pode ser confundida com o que já está prometido. Não recebe ponteiro: não é alvo. */ #solidSketch .sketch-dim-line.fantasma,#solidSketch .sketch-dim-ext.fantasma{opacity:.55;stroke-dasharray:5 3;pointer-events:none} #solidSketch text.sketch-dim-text.fantasma{opacity:.7;pointer-events:none} #solidSketch .sketch-dim-mark{fill:none;stroke:var(--ink);stroke-width:3;pointer-events:none} #solidSketch text.sketch-dim-text{fill:var(--accent-d);pointer-events:auto;cursor:pointer} #solidSketch text.sketch-dim-text.selected{fill:var(--ink);font-weight:700} .sketch-inline-dim{position:absolute;z-index:8;box-sizing:border-box;max-width:calc(100% - 12px);padding:8px 10px;background:var(--surface);color:var(--ink);border:1px solid var(--accent-d);border-radius:5px;box-shadow:0 3px 12px #0002} .sketch-inline-dim[hidden]{display:none} #solidWorkspace .sketch-inline-dim label{display:flex;flex-direction:row;align-items:center;gap:6px;margin:0;font-size:11px} #solidWorkspace .sketch-inline-dim input{width:88px;min-height:30px;font:14px var(--mono);padding:4px 6px} .sketch-inline-dim small{display:block;margin-top:4px;font-size:10px;color:var(--ink-soft)} .sketch-inline-dim [data-inline-error]{display:block;max-width:210px;font-size:11px;color:var(--sketch-conflito)} /* MARCA DA IMANTAÇÃO — o ponto salta para o alvo, e a marca diz PARA ONDE e POR QUÊ. Sem ela o salto parece defeito. Forma por tipo, na convenção do CAD: quadrado na ponta, triângulo no meio, x na interseção, círculo no centro, losango sobre o lado. Nada recebe ponteiro: é aviso, não alvo. */ #solidSketch .sketch-snap{fill:none;stroke:var(--accent-d);stroke-width:2;pointer-events:none} #solidSketch .sketch-snap-guia{fill:none;stroke:var(--accent-d);stroke-width:1;stroke-dasharray:6 4;opacity:.7;pointer-events:none} #solidSketch .sketch-origin-cross{fill:none;stroke:var(--accent-d);stroke-width:1.2;pointer-events:none} #solidSketch text.sketch-snap-label{fill:var(--accent-d);font-family:var(--sans);font-weight:600} /* INFERÊNCIA — o glifo é o MESMO da relação que vai nascer (H, V, ∥, ⊥): dois vocabulários para a mesma ideia ensinariam o usuário a desconfiar dos dois. O lado de referência do ∥/⊥ é realçado — é ele que responde "a QUEM". */ #solidSketch text.sketch-inferencia{fill:var(--accent-d);font-family:var(--sans);font-weight:700;pointer-events:none} #solidSketch .sketch-inferencia-ref{fill:none;stroke:var(--accent-d);stroke-width:3;opacity:.45;pointer-events:none} /* ═══ Disposição das ferramentas ═══════════════════════════════════════════ Pedido do usuário: "revise todo o layout... melhorar a aparência e a disposição dos recursos... garanta que esse app CAD seja responsivo e simples assim como é a usabilidade do SolidWorks". O problema medido não era falta de recurso — eram ~60 botões do MESMO tamanho, do MESMO peso, em fileiras sem hierarquia: a barra de construir, a de acabamento e a de transformar liam como uma parede só. O que separa um CAD legível de uma parede de botões é agrupamento e ícone, não menos comando. Então: 1. o rótulo do grupo vira EYEBROW com divisória, e o grupo passa a ser uma unidade visível (Construir | Acabamento | Transformar); 2. cada botão ganha ícone à esquerda do texto — o mesmo bloco em todos, ver cad_icons.js; 3. em tela estreita o TEXTO é recortado e sobra o ícone, com dica ao pousar. Recortado, não `display:none`: o nome acessível sobrevive. A paleta não se mexe (regra do projeto): o ganho vem de ritmo e ícone. */ #solidWorkspace button{display:inline-flex;align-items:center;gap:6px;line-height:1.2} #solidWorkspace .cad-ico{flex:none;display:block;opacity:.88} #solidWorkspace button[aria-pressed=true] .cad-ico,#solidWorkspace button:hover .cad-ico{opacity:1} #solidWorkspace button:disabled .cad-ico{opacity:.5} .cad-rotulo{white-space:nowrap} /* O rótulo do grupo é uma etiqueta, não um botão pálido: caixa alta, miúdo, com a divisória à esquerda separando um grupo do anterior. */ /* `:not(.hint)` NAO e precaucao: `#solidCutInfo` e `#solidSheetZoomInfo` sao spans irmaos dos rotulos, e sem o filtro eles viravam etiqueta de grupo -- caixa alta e com divisoria. O texto que diz ONDE o plano de corte esta passou a gritar "CORTE EM Y = 0 MM". Quem denunciou foi o teste de exibicao, que le o texto RENDERIZADO (`inner_text`), onde `text-transform` conta; `textContent` nao teria acusado nada. Rotulo de grupo nao tem classe; dica tem. */ .solid-commandbar>span:not(.hint),.solid-views>span:not(.hint),#solidSheetTools>span:not(.hint){ font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft); margin:0 2px 0 10px;padding-left:12px;border-left:1px solid var(--line-2);align-self:center} .solid-commandbar>span:not(.hint):first-child,.solid-views>span:not(.hint):first-child,#solidSheetTools>span:not(.hint):first-child{ margin-left:0;padding-left:0;border-left:0} /* Esboço · Modelo · Prancha são EXCLUSIVOS — um seletor segmentado diz isso de olhar, e é o gesto que o resto do app já usa (.seg). */ #solidSketchButton,#solidModelButton,#solidSheetButton{border-radius:0;margin-left:-1px} #solidSketchButton{border-radius:6px 0 0 6px;margin-left:0} #solidSheetButton{border-radius:0 6px 6px 0;margin-right:10px} #solidModelButton[aria-pressed=true],#solidSheetButton[aria-pressed=true]{ background:var(--accent-bg);border-color:var(--accent-d);z-index:1} .solid-views{align-items:center} @media(max-width:1100px){ /* Só o ícone: o rótulo é RECORTADO, e continua sendo o nome acessível do botão (leitor de tela e teste continuam achando). `display:none` o apagaria da árvore de acessibilidade — não é a mesma coisa. */ .solid-views .cad-rotulo,#solidSheetTools .cad-rotulo{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0} .solid-views button,#solidSheetTools button{padding:8px;gap:0} } @media(max-width:760px){ .solid-commandbar .cad-rotulo{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0} .solid-commandbar button{padding:9px;gap:0;min-height:38px} .solid-views button,#solidSheetTools button,.solid-viewbar button{min-height:38px;min-width:38px;justify-content:center} } /* Prancha 2D. O SVG é uma folha A4 de 297×210: na coluna estreita do painel ela cai para uns 4 px por milímetro e o texto da legenda vira borrão — foi a queixa do usuário ("expandir a tela para melhor visualização"). A folha passa a ter ampliação própria (a variável) dentro de um berço que rola, e continua respondendo ao "Ampliar área de trabalho" como todo o resto. */ #solidSheet{overflow:auto;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px;margin:14px 0} #solidSheet svg{display:block;width:calc(100% * var(--sheet-zoom,1));min-width:300px;height:auto;background:#fff;margin:0;box-shadow:0 2px 12px rgba(0,0,0,.18);border-radius:2px} /* Arrastar a vista é o gesto padrão; cotar é o modo, e aí o cursor muda para mira porque o clique passa a grudar em ponto de geometria. */ #solidSheet .sheet-vista{cursor:grab} #solidSheet .sheet-vista:hover{opacity:.82} #solidSheet .sheet-vista.arrastando{cursor:grabbing;opacity:.6} #solidSheet.cotando .sheet-vista{cursor:crosshair;opacity:1} #solidWorkspace.solid-expanded #solidSheet{max-height:none} /* Balão de aviso do CAD. A tira do rodapé do painel continua existindo (é o `aria-live` e o histórico do último recado), mas ninguém a lia — relato do usuário, com print. Posição FIXA na janela, não colada ao topo do painel: medido, ancorado ao painel ele saía da tela (topo em −138 px) assim que a página rolava para o esboço, que é justamente quando o recado importa. Balão fora da tela é a mesma tira de antes, com mais trabalho. Fica embaixo ao centro, que é onde o `.toast` do app já fala — e some junto com o painel quando o CAD não está na tela, porque `position:fixed` dentro de um pai `display:none` não pinta. Cor de FUNDO e de TEXTO saem as duas de token (nunca token contra valor fixo — a regra do `.toast` do styles.css), e o [hidden] leva guarda explícita porque `display:flex` de autor vence a folha do navegador. */ .solid-canvas{position:relative} .solid-balao{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:200; display:flex;align-items:flex-start;gap:10px;max-width:min(560px,92%); padding:12px 14px;border-radius:10px;border:1px solid var(--line-2); background:var(--surface);color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.28); font-size:13.5px;line-height:1.45; /* O balao INFORMA; ele nao pode bloquear a area de trabalho. Sem isto ele engolia o clique na faixa de baixo da tela -- medido: arrastar uma vista da prancha parava de funcionar quando ela caia atras dele, e o app nao dava sinal nenhum. Mesma regra do `.toast` do app. O fechar volta a receber evento, senao nao haveria como fecha-lo. */ pointer-events:none} .solid-balao button{pointer-events:auto} .solid-balao[hidden]{display:none} .solid-balao p{margin:0;flex:1;min-width:0;overflow-wrap:anywhere} .solid-balao-icone{flex:none;width:20px;height:20px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--accent-bg);color:var(--accent-d);font-weight:700;font-size:13px;line-height:1} .solid-balao button{flex:none;background:none;border:0;padding:2px 4px;cursor:pointer; color:var(--ink-soft);font-size:14px;line-height:1} .solid-balao button:hover{color:var(--ink)} /* Erro fica até ser fechado (ou até vir outro recado) e é gritado na cor de destaque — some sozinho seria a tira de antes, só que piscando. */ .solid-balao.erro{border-color:var(--accent-d);background:var(--accent-bg)} .solid-balao.erro .solid-balao-icone{background:var(--accent-d);color:var(--surface)} .solid-balao.erro p{font-weight:600} @media(max-width:560px){.solid-balao{bottom:14px;max-width:96%;font-size:13px;padding:10px 12px}} /* Relações geométricas. Cor DIFERENTE da cota de propósito: as duas convivem no mesmo desenho e dizem coisas diferentes — a cota mede, a relação promete. O glifo usa os tokens de tema nos dois lados (fundo E texto), nunca cor fixa contra token (a regra do `.toast` do styles.css). */ #solidSketch .sketch-rel{fill:transparent;stroke:none;cursor:pointer} #solidSketch .sketch-rel.selected{fill:var(--accent-bg);stroke:var(--accent-d);stroke-width:1.6} #solidSketch text.sketch-rel-glifo{fill:var(--ink-soft);font-weight:500;pointer-events:auto;cursor:pointer;opacity:.65;stroke:none} #solidSketch .sketch-relation:hover .sketch-rel-glifo, #solidSketch .sketch-relation.associated .sketch-rel-glifo, #solidSketch .sketch-relation.selected .sketch-rel-glifo{opacity:1;fill:var(--ink);font-weight:700} #solidSketch .sketch-relation:hover .sketch-rel, #solidSketch .sketch-relation.selected .sketch-rel{fill:var(--accent-bg);stroke:var(--accent-d);stroke-width:1} #solidSketch .sketch-relation.conflict .sketch-rel-glifo{fill:var(--sketch-conflito);opacity:1} .sketch-rel-editor{align-items:flex-start} .sketch-rel-titulo{font-size:11px;color:var(--ink-soft);align-self:center;margin-right:2px} .sketch-rel-lista{flex:1 0 100%;list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px} .sketch-rel-lista li{margin:0} .sketch-rel-lista li.vazia{font-size:11px;color:var(--ink-soft);padding:4px 0} .sketch-rel-lista button{font-size:11px;padding:4px 7px} .sketch-rel-lista button[aria-pressed=true]{background:var(--accent-bg);border-color:var(--accent-d);font-weight:700} .sketch-dim-editor label{flex-direction:column;align-items:flex-start;gap:2px} .sketch-dim-editor input{width:80px;min-height:30px;padding:3px 5px;font-family:var(--mono);box-sizing:border-box} #solidWorkspace.sketch-active #solidModelViews{grid-template-columns:minmax(0,1fr)} #solidWorkspace.sketch-active #solidSketchWrap{grid-column:1;grid-row:1;max-width:none;padding:12px} #solidWorkspace.sketch-active #solidSketch{height:470px;border:1px solid var(--line-2)} #solidWorkspace.sketch-active #solidSketchTools{display:block} #solidWorkspace.sketch-active .sketch-help{display:block;font-size:11px;color:var(--ink-soft);margin:7px 0} #solidWorkspace.sketch-active .solid-viewport,#solidWorkspace.sketch-active #solidViewer,#solidWorkspace.sketch-active #solidModelViews>.cad-mini-actions,#solidWorkspace.sketch-active #solidModelViews>.hint,#solidWorkspace.sketch-active .solid-pick{display:none} /* Leitura da seleção 3D: fica colada ao visualizador, como a barra de status do SolidWorks — é ali que se lê a medida do que está selecionado. */ #solidModelViews>.solid-pick{grid-column:1/-1;margin:0} .solid-pick #solidPickInfo{font:12px var(--mono,monospace);color:var(--ink);margin:8px 0 0;min-height:18px;overflow-wrap:anywhere} .solid-pick .cad-mini-actions{padding:8px 0 0} .solid-pick button{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:8px 10px;cursor:pointer;font:inherit;font-size:12px} /* 🔴 ALTURA RESERVADA, não mínima. A barra mudava de tamanho conforme o texto (65 px numa ferramenta, 178 px noutra) e, como mora na fita, isso encolhia a área de desenho: o `fillViewport()` recalculava o viewBox e o DESENHO ANDAVA debaixo do cursor — o vértice gravado deixava de ser o clicado. É o mesmo defeito, e a mesma correção, do aviso da pré-visualização do 3D. */ #solidWorkspace.sketch-active #solidSketchHint{font-size:12px;height:34px;min-height:34px; line-height:1.4;overflow:hidden;margin:0} /* 🔴 E a FITA inteira também tem altura reservada, pelo mesmo motivo. Não era só a frase: trocar para Relações levava as ferramentas de 86 para 142 px, e cada relação CRIADA acrescentava mais uma linha à lista — a área de desenho ia de 664 para 607 px NO MEIO DO TRABALHO, e o desenho andava junto. O preço são ~60 px de fita vazia nas ferramentas simples. É menos que o preço de um vértice gravado no lugar errado. */ #solidWorkspace.sketch-active #solidSketchTools{height:120px;overflow-y:auto} @media(max-width:900px){#solidWorkspace.sketch-active #solidSketchTools{height:auto;overflow:visible}} @media(max-width:900px){#solidWorkspace.sketch-active #solidSketchHint{height:50px;min-height:50px}} .sketch-tools{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:0 0 8px} .sketch-tools button{padding:7px 9px;border:1px solid var(--line-2);border-radius:4px;background:var(--surface);color:var(--ink);font:12px var(--sans);cursor:pointer} .sketch-tools button[aria-pressed=true],#solidSketchButton[aria-pressed=true]{background:var(--accent-bg);border-color:var(--accent-d);color:var(--ink)} .sketch-tools label{display:flex;flex-direction:row;align-items:center;gap:4px;margin:0 4px;font-size:11px} /* display de autor vence o [hidden] do navegador: o campo Lados só existe com o Polígono */ .sketch-tools label[hidden]{display:none} .sketch-tools input[type=checkbox]{width:15px;height:15px;margin:0} .sketch-tools select{width:60px;min-height:30px;padding:3px} #solidWorkspace.panels-hidden .solid-tree,#solidWorkspace.panels-hidden .solid-editor{display:none} #solidWorkspace.panels-hidden .solid-layout{grid-template-columns:minmax(0,1fr)} body.cad-expanded{overflow:hidden} /* ========================================================================== O CAD COMO APLICATIVO DE DESKTOP, não como página que contém ferramentas ========================================================================== Pedido do usuário, com prints do SolidWorks: "transformar 'uma página web que contém ferramentas CAD' em 'um ambiente CAD profissional de desktop dentro do navegador'". A anatomia é a que qualquer usuário de CAD procura sem pensar: barra de título · faixa de comandos com abas [ FeatureManager / PropertyManager | ÁREA GRÁFICA ] barra de status Três decisões que sustentam tudo: 1. ALTURA FIXA. `--cad-alto` é medido em JS (o que sobra da janela abaixo do cabeçalho do site) e a casca é `display:flex` com `overflow:hidden`. A página não cresce quando um painel aparece — quem rola é o painel. 2. A ÁREA GRÁFICA É `1fr`. Toda folga sobra para a geometria, que é o que o usuário veio olhar. Cada elo da corrente tem `min-height:0`, senão o flex se recusa a encolher e a área gráfica vaza para fora da casca. 3. PALETA NEUTRA, só aqui dentro. O creme da marca continua no resto do app; dentro do CAD ele virava um ambiente marrom onde aço e ferro não leem. O terracota Gabriel Seal fica como cor de ESTADO ATIVO — é assim que a identidade sobrevive num ambiente técnico. */ #solidWorkspace{ --painel-w:280px; --cad-alto:640px; --bg:#eceef0;--surface:#f7f8f9;--surface-2:#f1f2f4;--line:#d0d3d7; --ink:#222;--ink-soft:#5c6166; --accent:#CC785C;--accent-d:#B5634A;--accent-bg:#fbeee8;--accent-line:#e7cdc1; --cad-sel:#dce9f7;--cad-sel-line:#2f6fb3; --cad-view:linear-gradient(180deg,#fdfdfe 0%,#e4e9ef 100%); /* B4 — SEMÂNTICA DO ESBOÇO, e ela não é a paleta do aplicativo. O AZUL é subdefinido e só existe pintado dentro de #solidSketch: não substitui --accent, não entra em botão, em painel nem em lugar nenhum fora da tela de desenho. O vermelho é o único que sai do canvas, e sai para o painel de relações — é lá que se remove a promessa por atender. */ --sketch-sub:#1668cc;--sketch-def:#1b2026;--sketch-conflito:#b8352b;--sketch-dangling:#9a6413;--sketch-halo:#CC785C; display:flex;flex-direction:column;height:var(--cad-alto);min-height:520px; overflow:hidden;background:var(--bg);color:var(--ink); border:1px solid var(--line);border-radius:8px;font-size:13px;line-height:1.35; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #solidWorkspace{ --bg:#26282b;--surface:#2f3236;--surface-2:#2a2d30;--line:#44484d; --ink:#e7e9ea;--ink-soft:#a3a9af; --accent:#E08F6F;--accent-d:#EDA688;--accent-bg:#40342e;--accent-line:#5A4438; --cad-sel:#31425a;--cad-sel-line:#6ea8e6; --cad-view:linear-gradient(180deg,#3a3e43 0%,#24272a 100%); --sketch-sub:#5fa8ff;--sketch-def:#eef1f3;--sketch-conflito:#ff7d70;--sketch-dangling:#e0b062;--sketch-halo:#E08F6F; } } :root[data-theme="dark"] #solidWorkspace{ --bg:#26282b;--surface:#2f3236;--surface-2:#2a2d30;--line:#44484d; --ink:#e7e9ea;--ink-soft:#a3a9af; --accent:#E08F6F;--accent-d:#EDA688;--accent-bg:#40342e;--accent-line:#5A4438; --cad-sel:#31425a;--cad-sel-line:#6ea8e6; --cad-view:linear-gradient(180deg,#3a3e43 0%,#24272a 100%); --sketch-sub:#5fa8ff;--sketch-def:#eef1f3;--sketch-conflito:#ff7d70;--sketch-dangling:#e0b062;--sketch-halo:#E08F6F; } /* ── Barra de título: marca, menus, ações rápidas, nome da peça ──────────── */ #solidWorkspace .cad-topbar{flex:none;display:flex;align-items:center;gap:10px; min-height:32px;padding:0 8px;background:var(--surface);border-bottom:1px solid var(--line)} #solidWorkspace .cad-marca{font-weight:700;font-size:12px;letter-spacing:.02em;color:var(--accent-d);white-space:nowrap} #solidWorkspace .cad-doc{margin-left:auto;font-size:12px;color:var(--ink-soft); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:26ch} #solidWorkspace .cad-menus{display:flex;gap:1px} #solidWorkspace .cad-menu{position:relative} #solidWorkspace .cad-menu-b{background:none;border:0;border-radius:4px;color:var(--ink); font:inherit;font-size:12px;padding:4px 9px;cursor:pointer} #solidWorkspace .cad-menu-b:hover,#solidWorkspace .cad-menu-b[aria-expanded=true]{background:var(--cad-sel)} #solidWorkspace .cad-menu-pop{position:absolute;top:calc(100% + 3px);left:0;z-index:40; min-width:220px;max-width:min(92vw,420px);display:flex;flex-direction:column;gap:1px; background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:5px; box-shadow:0 10px 28px rgba(0,0,0,.22)} #solidWorkspace .cad-menu-larga{min-width:360px} /* Menu de contexto: mesma casca do menu do topo, so que posicionado no cursor. z-index acima das sobreposicoes -- ele nasce por cima de tudo, inclusive do painel do cilindro. */ #solidWorkspace .cad-contexto{position:fixed;top:0;left:0;z-index:60;min-width:190px} #solidWorkspace .cad-menu-pop[hidden]{display:none} #solidWorkspace .cad-menu-pop button{display:flex;align-items:center;gap:8px;width:100%; background:none;border:0;border-radius:4px;color:var(--ink);font:inherit;font-size:12.5px; padding:6px 8px;cursor:pointer;text-align:left} #solidWorkspace .cad-menu-pop button:hover:not(:disabled){background:var(--cad-sel)} #solidWorkspace .cad-menu-pop button:disabled{opacity:.45;cursor:default} #solidWorkspace .cad-menu-pop hr{border:0;border-top:1px solid var(--line);margin:4px 2px} #solidWorkspace .cad-menu-titulo{margin:6px 8px 2px;font-size:10.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--ink-soft);font-weight:600} #solidWorkspace .cad-menu-pop p{margin:4px 8px;font-size:11.5px;color:var(--ink-soft)} #solidWorkspace .cad-quick,#solidWorkspace .cad-janela{display:flex;gap:2px;padding:0;flex-wrap:nowrap} #solidWorkspace .cad-janela{margin-left:6px} #solidWorkspace .cad-quick button,#solidWorkspace .cad-janela button{background:none;border:1px solid transparent; border-radius:4px;color:var(--ink);padding:4px;min-height:26px;min-width:26px; display:flex;align-items:center;justify-content:center;cursor:pointer;font:inherit} #solidWorkspace .cad-quick button:hover:not(:disabled),#solidWorkspace .cad-janela button:hover:not(:disabled){ background:var(--cad-sel);border-color:var(--cad-sel-line)} #solidWorkspace .cad-quick button:disabled,#solidWorkspace .cad-janela button:disabled{opacity:.4;cursor:default} /* Na barra de título mandam os ícones: rótulo RECORTADO, nunca removido — `display:none` apagaria o nome acessível do botão. */ #solidWorkspace .cad-quick .cad-rotulo,#solidWorkspace .cad-janela .cad-rotulo, #solidWorkspace .solid-heads .cad-rotulo{position:absolute;width:1px;height:1px;padding:0; margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} /* ── Faixa de comandos (CommandManager): abas + grupos rotulados ─────────── */ #solidWorkspace .cad-ribbon{flex:none;background:var(--surface-2);border-bottom:1px solid var(--line)} #solidWorkspace .cad-ribbon-abas{display:flex;gap:2px;padding:2px 8px 0;overflow-x:auto} #solidWorkspace .cad-ribbon-abas button{flex:none;background:none;border:1px solid transparent; border-bottom:0;border-radius:6px 6px 0 0;color:var(--ink-soft);font:inherit;font-size:12px; font-weight:600;padding:4px 14px;cursor:pointer} #solidWorkspace .cad-ribbon-abas button[aria-selected=true]{background:var(--surface); border-color:var(--line);color:var(--ink)} #solidWorkspace .cad-ribbon-paineis{background:var(--surface);border-top:1px solid var(--line); margin-top:-1px} #solidWorkspace .cad-fita{display:none} #solidWorkspace .cad-fita:not([hidden]){display:flex;align-items:stretch;gap:0; padding:3px 8px;overflow-x:auto;min-height:62px} #solidWorkspace .cad-fita>#solidSheetTools{display:flex;align-items:stretch} #solidWorkspace .cad-grupo{display:flex;flex-direction:column;justify-content:space-between; padding:0 6px;border-right:1px solid var(--line)} #solidWorkspace .cad-grupo:last-child{border-right:0} /* Esticar em vez de alinhar no topo: um rótulo de três linhas ("Esboço / recurso") deixava aquele botão mais alto que os vizinhos e a fileira saía desigual. Todos ficam da altura do mais alto. */ #solidWorkspace .cad-grupo-itens{display:flex;align-items:stretch;gap:3px;padding:0;flex-wrap:nowrap} /* Rótulo do GRUPO embaixo, como no CommandManager: diz do que é a fileira sem custar uma linha inteira de texto por botão. */ #solidWorkspace .cad-grupo>span:not(.hint){display:block;text-align:center;font-size:10px; letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;padding-top:2px} /* Botão de comando: ícone grande em cima, legenda pequena embaixo. */ #solidWorkspace .cad-fita .cad-grupo-itens button{flex:none;display:flex;flex-direction:column; align-items:center;justify-content:flex-start;gap:2px;width:52px;min-height:46px;padding:4px 1px; background:none;border:1px solid transparent;border-radius:5px;color:var(--ink); font:inherit;font-size:10.5px;line-height:1.15;text-align:center;cursor:pointer} #solidWorkspace .cad-fita .cad-grupo-itens button .cad-ico{width:20px;height:20px} #solidWorkspace .cad-fita .cad-grupo-itens button:hover:not(:disabled){background:var(--cad-sel);border-color:var(--cad-sel-line)} #solidWorkspace .cad-fita .cad-grupo-itens button[aria-pressed=true]{background:var(--accent-bg);border-color:var(--accent-line);font-weight:600} #solidWorkspace .cad-fita .cad-grupo-itens button:disabled{opacity:.4;cursor:default} /* o display:flex acima vence o [hidden] do navegador: botão contextual da faixa (Converter para sólido) só some com esta guarda */ #solidWorkspace .cad-fita .cad-grupo-itens button[hidden]{display:none} /* Rótulo do comando em DUAS linhas em vez de cortado: "Linha / co…" e "Cota inteli…" não dizem qual comando é — e o ícone sozinho, para quem está aprendendo, também não. Duas linhas cabem e o comando fica legível. */ #solidWorkspace .cad-fita .cad-rotulo{display:-webkit-box;-webkit-line-clamp:3; -webkit-box-orient:vertical;line-clamp:3;max-width:52px;overflow:hidden;white-space:normal; hyphens:auto} #solidWorkspace .cad-fita .hint{align-self:center;margin:0 0 0 8px;font-size:11px;max-width:34ch} #solidWorkspace .cad-fita input[type=range]{align-self:center;width:120px} /* A barra do esboço é do editor de esboço, e vem em fileiras: a primeira são as FERRAMENTAS (ícone grande), as demais são ações e ajustes — compactas, senão a faixa dobrava de altura só na aba Esboço (medido: 160 px). */ #solidWorkspace #solidSketchTools{flex-direction:column;gap:2px} #solidWorkspace #solidSketchTools .sketch-tools{display:flex;flex-wrap:wrap;gap:3px; align-items:center;padding:0;border:0;margin:0} #solidWorkspace #solidSketchTools .sketch-tools:not(:first-child) button{width:auto;min-height:24px; flex-direction:row;gap:5px;padding:3px 8px;font-size:11px} #solidWorkspace #solidSketchTools .sketch-tools:not(:first-child) .cad-rotulo{max-width:none; -webkit-line-clamp:1;line-clamp:1;white-space:nowrap} #solidWorkspace #solidSketchTools .sketch-tools label{flex-direction:row;align-items:center;gap:4px; margin:0;font-size:11px} #solidWorkspace #solidSketchTools .sketch-tools select{width:auto} /* Modo atual: contorno e faixa permanecem reconhecíveis nos dois temas. */ #solidWorkspace #solidSketchTools [data-sketch-tool][aria-pressed=true]{ background:var(--accent-bg);border:2px solid var(--accent-d);padding:3px 1px; box-shadow:inset 0 -3px var(--accent-d);font-weight:700} #solidWorkspace #solidSketchTools [data-sketch-tool="line"], #solidWorkspace #solidSketchTools [data-sketch-tool="dimension"], #solidWorkspace #solidSketchTools [data-sketch-tool="corner"], #solidWorkspace #solidSketchTools [data-sketch-tool="pan"]{margin-left:8px} #solidWorkspace #solidSketchTools button:disabled{cursor:not-allowed} /* ── Corpo: painel lateral · divisor · área gráfica ──────────────────────── */ #solidWorkspace .solid-layout{flex:1 1 auto;min-height:0;display:grid; grid-template-columns:var(--painel-w) 5px minmax(0,1fr);border:0;border-radius:0;background:var(--bg)} #solidWorkspace .solid-painel{min-width:0;min-height:0;display:flex;flex-direction:column; background:var(--surface);border-right:1px solid var(--line)} #solidWorkspace .solid-painel-abas{flex:none;display:flex;gap:2px;padding:3px 4px 0; background:var(--surface-2);border-bottom:1px solid var(--line)} #solidWorkspace .solid-painel-abas button{flex:1 1 0;min-width:0;background:none; border:1px solid transparent;border-bottom:0;border-radius:5px 5px 0 0;color:var(--ink-soft); font:inherit;font-size:11px;font-weight:600;padding:4px 6px;cursor:pointer; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #solidWorkspace .solid-painel-abas button[aria-selected=true]{background:var(--surface); border-color:var(--line);color:var(--ink)} /* As duas seções dividem a altura: a árvore mostra a peça, as propriedades mostram o recurso aberto. As propriedades ganham mais espaço porque é onde se digita; cada uma rola por dentro. */ /* A ÁRVORE GANHOU ALTURA. Ela era 34% contra 66% do formulário — a proporção de quando ela era uma lista de duas linhas. Agora tem planos, origem, anotação, material e a hierarquia recurso→esboço, e é ela que responde "que peça é esta". O formulário continua rolando; a árvore, na maioria das peças, cabe inteira sem rolar, que é a diferença entre consultar e procurar. */ #solidWorkspace .solid-tree{flex:1 1 52%;min-height:150px} #solidWorkspace .solid-editor{flex:1 1 48%;min-height:0;border-top:2px solid var(--line-2,var(--line))} /* A seção em foco NÃO ganha faixa colorida na borda: o título dela já muda de cor (regra `.em-foco>h3`, mais abaixo) e a aba já fica marcada. Uma terceira marca para o mesmo estado é ruído. */ #solidWorkspace .solid-tree,#solidWorkspace .solid-editor{overflow:auto;padding:8px 10px; background:var(--surface);border-left:0;border-right:0;border-bottom:0} #solidWorkspace .solid-tree[hidden],#solidWorkspace .solid-editor[hidden]{display:none} /* Árvore OU propriedades, nunca as duas espremidas: quem está em foco ganha a coluna inteira (ver `painelLateral`). */ #solidWorkspace.so-arvore .solid-secao[data-painel=props], #solidWorkspace.so-props .solid-secao[data-painel=arvore]{display:none} #solidWorkspace.so-arvore .solid-tree,#solidWorkspace.so-props .solid-editor{flex:1 1 100%;border-top:0} /* Quem diz qual seção está em foco é a ABA — ela já fica marcada, e o painel rola até a seção. Um filete colorido na borda seria uma terceira voz dizendo a mesma coisa. O rótulo da seção em foco ganha a cor de destaque, que é o mesmo sinal do resto do app. */ #solidWorkspace .solid-secao.em-foco>h3, #solidWorkspace .solid-secao.em-foco .solid-editor-topo h3{color:var(--accent-d)} /* 🔴 A regra larga `@media(max-width:850px){.solid-tree ol{display:flex;...}}` vinha de quando a árvore era uma lista rasa de recursos, em que enfileirá-los em tela estreita economizava altura. Com hierarquia isso destrói o que a árvore existe para mostrar: filho ao lado do pai não é filho de ninguém. Empilhada ela fica, em qualquer largura. */ #solidWorkspace .solid-tree ol{display:block;margin:6px 0} #solidWorkspace .solid-tree li{margin:1px 0} /* FeatureManager: linhas compactas e hierárquicas, não cartões. */ #solidWorkspace .solid-tree button{width:100%;text-align:left;display:flex;align-items:center;gap:6px; background:none;border:1px solid transparent;border-radius:4px;color:var(--ink); font:inherit;font-size:12.5px;padding:3px 6px;cursor:pointer;overflow-wrap:anywhere} #solidWorkspace .solid-tree button:hover:not(:disabled){background:var(--surface-2)} #solidWorkspace .solid-tree button.selected{background:var(--cad-sel);border-color:var(--cad-sel-line);font-weight:600} /* ── Árvore de construção: a linha é SETA + NÓ ─────────────────────────────── A seta é um botão à parte porque recolher um galho não é selecionar o recurso — e um