Resaltar boton eliminar en configurador

config.html

@@ -179,7 +179,7 @@
 
     .device {
       display: grid;
-      grid-template-columns: 76px 1.35fr 1fr 1fr 1fr 1fr;
+      grid-template-columns: repeat(12, minmax(0, 1fr));
       gap: 10px;
       align-items: end;
       border: 1px solid var(--line);
@@ -188,17 +188,23 @@
       background: var(--panel-2);
     }
 
-    .field-name { grid-column: span 2; }
+    .field-active { grid-column: span 2; }
+    .field-name { grid-column: span 3; }
     .field-id { grid-column: span 2; }
-    .field-role { grid-column: span 2; }
+    .field-role { grid-column: span 3; }
+    .field-model { grid-column: span 2; }
     .field-location { grid-column: span 2; }
-    .field-auth { grid-column: span 1; }
+    .field-host { grid-column: span 3; }
-    .password-credential, .key-credential { grid-column: span 2; }
+    .field-port { grid-column: span 1; }
+    .field-username { grid-column: span 2; }
+    .field-auth { grid-column: span 2; }
+    .password-credential, .key-credential { grid-column: span 4; }
+    .field-delete { grid-column: span 2; }
     .device[data-auth-method="password"] .key-credential { display: none; }
     .device[data-auth-method="key"] .password-credential { display: none; }
 
     .credential-note {
-      grid-column: span 2;
+      grid-column: span 8;
       color: var(--muted);
       font-size: 12px;
       line-height: 1.35;
@@ -233,6 +239,10 @@
       accent-color: var(--ok);
     }
 
+    .field-active input[type="checkbox"] {
+      align-self: center;
+    }
+
     .actions {
       display: flex;
       gap: 10px;
@@ -252,7 +262,18 @@
     }
 
     button:hover, a:hover { border-color: var(--info); }
-    .danger:hover { border-color: var(--bad); }
+    .danger {
+      background: var(--offline-bg);
+      border-color: var(--offline-line);
+      color: var(--bad);
+      font-weight: 650;
+    }
+
+    .danger:hover {
+      background: var(--bad);
+      border-color: color-mix(in srgb, var(--bad) 72%, var(--text));
+      color: #ffffff;
+    }
 
     #save,
     #add,
@@ -374,7 +395,11 @@
     }
 
     @media (max-width: 1180px) {
-      .device { grid-template-columns: repeat(3, 1fr); align-items: start; }
+      .device { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; }
+      .field-name, .field-role, .field-host, .password-credential, .key-credential { grid-column: span 3; }
+      .field-id, .field-model, .field-location, .field-username, .field-auth, .field-active, .field-delete { grid-column: span 2; }
+      .field-port { grid-column: span 1; }
+      .credential-note { grid-column: span 4; }
       .top-grid { grid-template-columns: repeat(2, 1fr); }
       .threshold-row { grid-template-columns: 90px repeat(3, minmax(100px, 1fr)); }
     }
@@ -383,6 +408,9 @@
       header { flex-direction: column; align-items: flex-start; padding: 18px; }
       main { padding: 16px; }
       .top-grid, .device { grid-template-columns: 1fr; }
+      .field-active, .field-name, .field-id, .field-role, .field-model, .field-location,
+      .field-host, .field-port, .field-username, .field-auth, .password-credential,
+      .key-credential, .credential-note, .field-delete { grid-column: span 1; }
       .threshold-row { grid-template-columns: 1fr; }
     }
   </style>
@@ -565,17 +593,31 @@
       const authMethod = device.privateKeyPath ? "key" : "password";
       return `
         <div class="device" data-index="${index}" data-auth-method="${authMethod}">
-          <label title="Si esta activo, este dispositivo se consulta por SSH. Si esta inactivo, se muestra deshabilitado y no se escanea.">Activo
-            <input data-field="active" type="checkbox" ${device.active ? "checked" : ""}>
-          </label>
           <label class="field-name" title="Nombre visible de la tarjeta en el dashboard.">Nombre
-            <input data-field="name" value="${device.name || ""}">
+            <input data-field="name" maxlength="35" value="${device.name || ""}">
           </label>
-          <label title="IP o nombre DNS usado para conectar por SSH.">IP / host
+          <label class="field-id" title="Identificador interno unico. Se usa para tracking de metricas como red.">ID
+            <input data-field="id" maxlength="30" value="${device.id || ""}">
+          </label>
+          <label class="field-role" title="Funcion del equipo: Docker, Home Assistant, MQTT, Nginx, Gitea, etc.">Rol
+            <input data-field="role" value="${device.role || ""}">
+          </label>
+          <label class="field-model" title="Modelo de Raspberry usado como informacion visual.">Modelo
+            <select data-field="model">
+              ${["RPi 3", "RPi 4", "RPi 5"].map((model) => `<option ${device.model === model ? "selected" : ""}>${model}</option>`).join("")}
+            </select>
+          </label>
+          <label class="field-location" title="Ubicacion fisica o logica del dispositivo.">Ubicacion
+            <input data-field="location" maxlength="20" value="${device.location || ""}">
+          </label>
+          <label class="field-host" title="IP o nombre DNS usado para conectar por SSH.">IP / host
             <input data-field="host" value="${device.host || ""}">
           </label>
-          <label title="Usuario SSH para este dispositivo.">Usuario
+          <label class="field-port" title="Puerto SSH. Normalmente 22; en Home Assistant con add-on puede ser 2222.">Puerto
-            <input data-field="username" value="${device.username || ""}">
+            <input data-field="port" type="number" min="1" max="65535" maxlength="10" value="${device.port || 22}">
+          </label>
+          <label class="field-username" title="Usuario SSH para este dispositivo.">Usuario
+            <input data-field="username" maxlength="30" value="${device.username || ""}">
           </label>
           <label class="field-auth" title="Metodo de autenticacion SSH que usara el monitor para este dispositivo.">Auth SSH
             <select data-auth-method>
@@ -592,24 +634,10 @@
           <div class="credential-note">
             Metodo activo: <strong>${authMethod === "key" ? "Clave privada" : "Password"}</strong>
           </div>
-          <label class="field-id" title="Identificador interno unico. Se usa para tracking de metricas como red.">ID
+          <label class="field-active" title="Si esta activo, este dispositivo se consulta por SSH. Si esta inactivo, se muestra deshabilitado y no se escanea.">Activo
-            <input data-field="id" value="${device.id || ""}">
+            <input data-field="active" type="checkbox" ${device.active ? "checked" : ""}>
           </label>
-          <label title="Funcion del equipo: Docker, Home Assistant, MQTT, Nginx, Gitea, etc.">Rol
+          <button class="danger field-delete" data-remove="${index}" type="button">Eliminar</button>
-            <input data-field="role" value="${device.role || ""}">
-          </label>
-          <label title="Puerto SSH. Normalmente 22; en Home Assistant con add-on puede ser 2222.">Puerto
-            <input data-field="port" type="number" min="1" value="${device.port || 22}">
-          </label>
-          <label title="Modelo de Raspberry usado como informacion visual.">Modelo
-            <select data-field="model">
-              ${["RPi 3", "RPi 4", "RPi 5"].map((model) => `<option ${device.model === model ? "selected" : ""}>${model}</option>`).join("")}
-            </select>
-          </label>
-          <label class="field-location" title="Ubicacion fisica o logica del dispositivo.">Ubicacion
-            <input data-field="location" value="${device.location || ""}">
-          </label>
-          <button class="danger" data-remove="${index}" type="button">Eliminar</button>
         </div>
       `;
     }