Promote rcon historical model to primary

frontend/assets/css/styles.css

@@ -311,6 +311,49 @@ h2 {
   color: var(--accent-warm);
 }
 
+.servers-loading,
+.servers-empty {
+  display: grid;
+  justify-items: center;
+  gap: 14px;
+  width: 100%;
+  padding: 36px 24px;
+  border: 1px dashed rgba(183, 201, 125, 0.24);
+  border-radius: 18px;
+  background: linear-gradient(180deg, rgba(19, 24, 16, 0.72), rgba(10, 13, 9, 0.84));
+  color: var(--text-soft);
+  text-align: center;
+}
+
+.servers-loading__pulse {
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  background: var(--accent-warm);
+  box-shadow: 0 0 0 rgba(210, 182, 118, 0.34);
+  animation: servers-loading-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes servers-loading-pulse {
+  0% {
+    transform: scale(0.9);
+    box-shadow: 0 0 0 0 rgba(210, 182, 118, 0.26);
+    opacity: 0.78;
+  }
+
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 16px rgba(210, 182, 118, 0);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(0.92);
+    box-shadow: 0 0 0 0 rgba(210, 182, 118, 0);
+    opacity: 0.82;
+  }
+}
+
 .discord-button {
   display: inline-flex;
   align-items: center;

frontend/assets/js/main.js

@@ -93,6 +93,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
   updateBackendStatus(statusNode, "Backend comprobando", "status-chip--idle");
   setServersDataState(serversBadge, { timestampLabel: "" });
+  renderServersLoadingState(serversList);
   hydrateCommunityClans(communityClansList);
 
   let serverRefreshInFlight = false;
@@ -208,10 +209,28 @@ async function hydrateServers(
     const visibleItems = selectPrimaryServerItems(serversData.items);
     serversList.innerHTML = renderServerSections(visibleItems);
   } catch (error) {
-    console.warn("Servers panel remains on static fallback", error);
+    console.warn("Servers panel failed to hydrate with live data", error);
+    serversList.innerHTML =
+      '<p class="servers-empty">No se pudo cargar el estado real de servidores en este momento.</p>';
+    setServersDataState(serversBadge, {
+      label: "Actualizacion no disponible",
+      isFresh: false,
+    });
   }
 }
 
+function renderServersLoadingState(serversList) {
+  if (!serversList) {
+    return;
+  }
+  serversList.innerHTML = `
+    <div class="servers-loading">
+      <span class="servers-loading__pulse"></span>
+      <p>Cargando estado real de servidores...</p>
+    </div>
+  `;
+}
+
 function updateBackendStatus(statusNode, label, stateClass) {
   if (!statusNode) {
     return;