melhora visualizacao movel

frontend/src/routes/AtlasPage.tsx

@@ -57,13 +57,14 @@ export default function AtlasPage() {
         </div>
       </aside>
 
-      {(leftOpen || rightOpen) && (
+      {/* No mobile o painel de detalhes é uma bottom sheet (ver <aside> mais
+          abaixo) — o fundo escurecido só faz sentido pro drawer de camadas,
+          que ainda cobre a tela toda; a sheet já deixa o modelo 3D visível
+          por cima dela, então não precisa (e não deveria) escurecer a cena. */}
+      {leftOpen && (
         <div
           className="fixed inset-0 bg-black/50 z-20 md:hidden"
-          onClick={() => {
-            setLeftOpen(false);
-            setRightOpen(false);
-          }}
+          onClick={() => setLeftOpen(false)}
         />
       )}
 
@@ -78,28 +79,33 @@ export default function AtlasPage() {
         >
           ☰ Camadas
         </button>
-        <button
-          onClick={() => setRightOpen(true)}
-          className="md:hidden absolute top-3 right-3 z-10 bg-panel/90 border border-white/10 rounded-lg px-3 py-2 text-xs shadow-lg"
-        >
-          ℹ️ Detalhes
-        </button>
+        {!rightOpen && (
+          <button
+            onClick={() => setRightOpen(true)}
+            className="md:hidden absolute top-3 right-3 z-10 bg-panel/90 border border-white/10 rounded-lg px-3 py-2 text-xs shadow-lg"
+          >
+            ℹ️ Detalhes
+          </button>
+        )}
       </div>
 
+      {/* Desktop: gaveta lateral fixa, igual à de camadas. Mobile: bottom
+          sheet que sobe de baixo pra cima e some — a parte anatômica
+          selecionada (destacada no modelo 3D, atrás dela) continua visível
+          por cima, em vez de ser tampada pela tela inteira do painel. */}
       <aside
-        className={`fixed md:static inset-y-0 right-0 z-30 w-[86vw] max-w-[320px] md:w-auto
-          border-l border-white/10 bg-panel p-4 overflow-y-auto
-          transition-transform duration-200 md:translate-x-0
-          ${rightOpen ? "translate-x-0" : "translate-x-full"}`}
+        className={`fixed md:static inset-x-0 bottom-0 md:inset-auto z-30
+          max-h-[65vh] md:max-h-none md:h-full w-full md:w-auto
+          border-t md:border-t-0 md:border-l border-white/10 bg-panel
+          rounded-t-2xl md:rounded-none p-4 pt-2 md:pt-4 overflow-y-auto
+          shadow-[0_-8px_24px_rgba(0,0,0,0.4)] md:shadow-none
+          transition-transform duration-200 md:!translate-y-0
+          ${rightOpen ? "translate-y-0" : "translate-y-full"}`}
       >
-        <button
-          onClick={() => setRightOpen(false)}
-          className="md:hidden text-slate-400 hover:text-white text-sm mb-2 px-2 py-1"
-          aria-label="Fechar painel"
-        >
-          ✕ Fechar
-        </button>
-        <StructureInfoPanel bySlug={bySlug} />
+        {/* Alça de arrastar — só decorativa, mas é o sinal visual padrão de
+            bottom sheet ("puxe/deslize pra baixo pra fechar"). */}
+        <div className="md:hidden mx-auto mb-2 h-1.5 w-10 rounded-full bg-white/15" />
+        <StructureInfoPanel bySlug={bySlug} onClose={() => setRightOpen(false)} />
       </aside>
     </div>
   );