Update Docker Space layout and assets

.gitignore

@@ -1,3 +1,6 @@
 artifacts/non_strcut_embeddings_phages_1024.pt
 __pycache__/
 jobs/
+
+artifacts/non_strcut_embeddings_phages_1024.pt
+artifacts/struct_embeddings_phages_filtrado_50_1024.pt

artifacts/struct_embeddings_phages_filtrado_50_1024.pt

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:9329c7e0fd548c43b4641d6f14f783520b35eb72ba223fd0050815648d499027
-size 625236775

web/styles.css

@@ -88,13 +88,13 @@ button { font: inherit; }
 .ghost-toggle { align-self: center; min-height: 36px; padding: 0 12px; border: 1px dashed var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 0.78rem; font-weight: 800; cursor: pointer; }
 .ghost-toggle:hover { color: var(--blue); border-color: var(--blue); }
 
-.pipeline-strip { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: clamp(8px, 1.05vw, 18px); margin-top: clamp(10px, 1.9vh, 20px); padding: clamp(12px, 2vh, 28px) clamp(14px, 1.85vw, 30px); border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-lg); background: var(--glass-rough); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.3); backdrop-filter: blur(24px) saturate(1.45); }
+.pipeline-strip { display: grid; grid-template-columns: repeat(4, auto auto) auto; justify-content: space-between; align-items: center; gap: clamp(4px, 0.55vw, 10px); min-width: 0; margin-top: clamp(10px, 1.9vh, 20px); padding: clamp(12px, 2vh, 28px) clamp(12px, 1.45vw, 24px); border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-lg); background: var(--glass-rough); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.3); backdrop-filter: blur(24px) saturate(1.45); }
 [data-theme="dark"] .pipeline-strip { border-color: rgba(84,161,255,0.22); background: linear-gradient(145deg, rgba(16, 36, 64, 0.42), rgba(0, 5, 14, 0.2)); box-shadow: var(--shadow), inset 0 1px 0 rgba(125,190,255,0.1); }
-.pipeline-strip article { display: grid; grid-template-columns: 44px 1fr; column-gap: 13px; align-items: center; }
+.pipeline-strip article { display: grid; grid-template-columns: clamp(30px, 3.5vh, 42px) minmax(0, max-content); column-gap: clamp(6px, 0.75vw, 11px); align-items: center; min-width: 0; max-width: clamp(104px, 11vw, 150px); }
 .pipeline-strip img { grid-row: span 2; width: clamp(30px, 4vh, 42px); height: clamp(30px, 4vh, 42px); object-fit: contain; }
-.pipeline-strip strong { font-size: clamp(0.72rem, 1.25vh, 0.94rem); }
-.pipeline-strip span { margin-top: 3px; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
-.pipeline-strip b { color: #8392aa; font-size: 1.45rem; font-weight: 500; }
+.pipeline-strip strong { min-width: 0; overflow-wrap: anywhere; font-size: clamp(0.68rem, 1.45vh, 1.08rem); line-height: 1.08; }
+.pipeline-strip span { min-width: 0; margin-top: 3px; overflow-wrap: anywhere; color: var(--muted); font-size: clamp(0.62rem, 1.16vh, 0.84rem); font-weight: 700; line-height: 1.1; }
+.pipeline-strip b { justify-self: center; color: #8392aa; font-size: clamp(1rem, 1.9vh, 1.35rem); font-weight: 500; }
 
 .schema-card, .results-area { border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-xl); background: var(--glass-soft); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.24); backdrop-filter: blur(20px) saturate(1.25); }
 .result-card { border: 1px solid rgba(255,255,255,0.24); border-radius: var(--radius-xl); background: var(--glass-rough); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.34); backdrop-filter: blur(28px) saturate(1.55); }
@@ -171,16 +171,16 @@ button { font: inherit; }
 .classes-card strong { color: var(--blue); }
 .dot { width: 10px; height: 10px; border-radius: 999px; }
 .coral { background: #ff755f; } .green { background: #18c79e; } .cyan { background: #27c8d5; } .blue { background: #5486ff; } .violet { background: #655cff; }
-.cluster-card { display: flex; flex-direction: column; }
-.cluster-cols { display: grid; grid-template-columns: 0.8fr 1fr 1.12fr; gap: clamp(12px, 1.35vw, 22px); margin-top: clamp(10px, 1.55vh, 20px); }
+.cluster-card { display: flex; flex-direction: column; gap: clamp(7px, 1vh, 12px); }
+.cluster-cols { display: grid; grid-template-columns: 0.8fr 1fr 1.12fr; gap: clamp(10px, 1.1vw, 18px); flex: 1 1 auto; min-height: 0; margin-top: clamp(5px, 0.9vh, 12px); overflow: hidden; }
 .cluster-cols > div { border-right: 1px solid var(--line); padding-right: 18px; }
 .cluster-cols > div:last-child { border-right: 0; }
 .cluster-cols span { display: block; color: var(--muted); font-size: clamp(0.62rem, 1vh, 0.75rem); font-weight: 800; }
 .cluster-cols strong { display: block; margin: clamp(6px, 1vh, 12px) 0 clamp(8px, 1.7vh, 22px); color: var(--blue); font-size: clamp(1.08rem, 2.2vh, 1.55rem); }
 .cluster-cols small { display: block; margin-top: clamp(6px, 1vh, 12px); color: var(--text); line-height: 1.35; font-size: clamp(0.65rem, 1.05vh, 0.82rem); }
 .cluster-cols mark { display: table; margin-top: clamp(5px, 0.95vh, 10px); padding: clamp(5px, 0.9vh, 8px) 11px; border-radius: 8px; color: var(--blue); background: rgba(8, 121, 242, 0.12); font-size: clamp(0.62rem, 1vh, 0.78rem); font-weight: 900; }
-.cluster-cols ul { margin: clamp(5px, 0.9vh, 10px) 0 0; padding-left: 16px; color: var(--text); font-size: clamp(0.62rem, 1.05vh, 0.82rem); line-height: 1.6; }
-.btn.detail { align-self: flex-end; min-width: 230px; min-height: clamp(34px, 4vh, 42px); margin-top: auto; color: var(--blue); background: transparent; box-shadow: none; }
+.cluster-cols ul { margin: clamp(5px, 0.9vh, 10px) 0 0; padding-left: 16px; color: var(--text); font-size: clamp(0.62rem, 1.05vh, 0.82rem); line-height: 1.45; }
+.btn.detail { align-self: flex-end; flex: 0 0 auto; min-width: min(230px, 100%); min-height: clamp(32px, 3.7vh, 40px); margin-top: 0; color: var(--blue); background: transparent; box-shadow: none; }
 
 .empty-state { display: grid; place-content: center; justify-items: center; gap: 10px; height: calc(100% - clamp(26px, 3.6vh, 38px)); padding: 2vh 20px; text-align: center; }
 .empty-state[hidden] { display: none !important; }
@@ -218,9 +218,17 @@ button { font: inherit; }
 @media (max-width: 900px) {
   .service-shell { padding: 10px; }
   .hero-panel { grid-template-columns: minmax(0, 1fr) minmax(280px, 35vw); gap: 10px; }
+  .pipeline-strip { gap: 4px; padding-inline: 10px; }
+  .pipeline-strip article { grid-template-columns: 30px minmax(0, 1fr); column-gap: 5px; }
+  .pipeline-strip img { width: 30px; height: 30px; }
+  .pipeline-strip b { font-size: 1rem; }
   .schema-card { border-radius: 7px; }
   .result-grid { gap: 6px; }
   .cluster-cols { gap: 8px; }
+  .cluster-cols > div { padding-right: 8px; }
+  .cluster-cols strong { margin: 5px 0 7px; }
+  .cluster-cols small, .cluster-cols ul { line-height: 1.28; }
+  .btn.detail { align-self: stretch; justify-content: space-between; padding-inline: 12px; }
 }
 
 @media (max-width: 560px) {