Estilo de estados

static/app.js

@@ -1,5 +1,15 @@
 const API_BASE = window.location.origin;
 
+function getStateClass(state) {
+    switch (state) {
+        case 'running': return 'bg-success';
+        case 'shut off': return 'bg-secondary';
+        case 'paused': return 'bg-warning text-dark';
+        case 'crashed': return 'bg-danger';
+        default: return 'bg-light text-dark';
+    }
+}
+
 async function loadVMs() {
     try {
         const response = await fetch(`${API_BASE}/vms`);
@@ -14,7 +24,7 @@ async function loadVMs() {
             row.innerHTML = `
                 <td>${vm.id}</td>
                 <td>${vm.name}</td>
-                <td>${vm.state}</td>
+                <td><span class="badge ${getStateClass(vm.state)}">${vm.state}</span></td>
                 <td>
                     <button class="btn btn-sm btn-success" onclick="startVM('${vm.name}')">Lanzar</button>
                     <button class="btn btn-sm btn-warning" onclick="stopVM('${vm.name}')">Stop</button>