diff --git a/frontend/assets/css/historico.css b/frontend/assets/css/historico.css
index c4b24f7..950c54d 100644
--- a/frontend/assets/css/historico.css
+++ b/frontend/assets/css/historico.css
@@ -766,3 +766,43 @@
     min-width: 540px;
   }
 }
+
+.historical-match-card--clean {
+  gap: 12px;
+}
+
+.historical-match-card__top--clean {
+  display: block;
+}
+
+.historical-match-meta--clean {
+  grid-template-columns: minmax(180px, 1.3fr) minmax(120px, 0.8fr) minmax(110px, 0.7fr) minmax(110px, 0.7fr) auto;
+  align-items: end;
+}
+
+.historical-match-card__actions-cell {
+  display: flex;
+  align-items: end;
+  justify-content: flex-end;
+  min-width: 250px;
+}
+
+.historical-match-card__actions-cell .historical-match-card__actions {
+  align-items: center;
+  justify-content: flex-end;
+}
+
+@media (max-width: 920px) {
+  .historical-match-meta--clean {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
+  }
+
+  .historical-match-card__actions-cell {
+    justify-content: flex-start;
+    min-width: 0;
+  }
+
+  .historical-match-card__actions-cell .historical-match-card__actions {
+    justify-content: flex-start;
+  }
+}
diff --git a/frontend/assets/js/historico-recent-live.js b/frontend/assets/js/historico-recent-live.js
index c382fbe..fe3c1cb 100644
--- a/frontend/assets/js/historico-recent-live.js
+++ b/frontend/assets/js/historico-recent-live.js
@@ -78,33 +78,86 @@
   }
 
   function renderDynamicRecentMatchCard(item) {
-    if (typeof window.renderRecentMatchCard === "function") {
-      return window.renderRecentMatchCard(item);
-    }
     const mapName = item?.map?.pretty_name || item?.map?.name || "Mapa no disponible";
     const serverName = item?.server?.name || "Servidor no disponible";
     const closedAt = item?.closed_at || item?.ended_at || item?.started_at;
+    const detailUrl = buildDynamicInternalMatchDetailUrl(item);
+    const externalUrl = normalizeDynamicExternalMatchUrl(item?.match_url);
+
+    const actions = [
+      `<span class="historical-match-card__result">${escapeDynamicHtml(formatDynamicResultLabel(item?.result))}</span>`,
+      detailUrl
+        ? `<a class="historical-match-card__link" href="${escapeDynamicHtml(detailUrl)}">Ver detalles</a>`
+        : "",
+      externalUrl
+        ? `<a class="historical-match-card__link" href="${escapeDynamicHtml(externalUrl)}" target="_blank" rel="noopener noreferrer">Ver partida</a>`
+        : "",
+    ].join("");
+
     return `
-      <article class="historical-match-card">
-        <div class="historical-match-card__top">
-          <div>
-            <p class="historical-match-meta__label">Partida ${escapeDynamicHtml(item?.match_id || "sin id")}</p>
-            <h3 class="historical-match-card__title">${escapeDynamicHtml(mapName)}</h3>
-          </div>
-          <div class="historical-match-card__actions">
-            <span class="historical-match-card__result">${escapeDynamicHtml(formatDynamicScore(item?.result))}</span>
-          </div>
+      <article class="historical-match-card historical-match-card--clean">
+        <div class="historical-match-card__top historical-match-card__top--clean">
+          <h3 class="historical-match-card__title">${escapeDynamicHtml(mapName)}</h3>
         </div>
-        <div class="historical-match-meta">
-          <article><p class="historical-match-meta__label">Servidor</p><strong>${escapeDynamicHtml(serverName)}</strong></article>
-          <article><p class="historical-match-meta__label">Cierre</p><strong>${escapeDynamicHtml(formatDynamicTimestamp(closedAt))}</strong></article>
-          <article><p class="historical-match-meta__label">Jugadores</p><strong>${escapeDynamicHtml(formatDynamicNumber(item?.player_count))}</strong></article>
-          <article><p class="historical-match-meta__label">Marcador</p><strong>${escapeDynamicHtml(formatDynamicScore(item?.result))}</strong></article>
+        <div class="historical-match-meta historical-match-meta--clean">
+          <article>
+            <p class="historical-match-meta__label">Servidor</p>
+            <strong>${escapeDynamicHtml(serverName)}</strong>
+          </article>
+          <article>
+            <p class="historical-match-meta__label">Cierre</p>
+            <strong>${escapeDynamicHtml(formatDynamicTimestamp(closedAt))}</strong>
+          </article>
+          <article>
+            <p class="historical-match-meta__label">Jugadores</p>
+            <strong>${escapeDynamicHtml(formatDynamicNumber(item?.player_count))}</strong>
+          </article>
+          <article>
+            <p class="historical-match-meta__label">Marcador</p>
+            <strong>${escapeDynamicHtml(formatDynamicScore(item?.result))}</strong>
+          </article>
+          <article class="historical-match-card__actions-cell">
+            <div class="historical-match-card__actions">
+              ${actions}
+            </div>
+          </article>
         </div>
       </article>
     `;
   }
 
+  function formatDynamicResultLabel(result) {
+    const winner = String(result?.winner || "").toLowerCase();
+    if (winner === "allies" || winner === "allied") {
+      return "Victoria aliada";
+    }
+    if (winner === "axis") {
+      return "Victoria axis";
+    }
+    return "Empate";
+  }
+
+  function buildDynamicInternalMatchDetailUrl(item) {
+    const serverSlug = item?.server?.slug;
+    const matchId = item?.internal_detail_match_id || item?.match_id;
+    if (!serverSlug || matchId === undefined || matchId === null) {
+      return "";
+    }
+    return `./historico-partida.html?server=${encodeURIComponent(String(serverSlug))}&match=${encodeURIComponent(String(matchId))}`;
+  }
+
+  function normalizeDynamicExternalMatchUrl(value) {
+    if (typeof value !== "string" || !value.trim()) {
+      return "";
+    }
+    try {
+      const url = new URL(value.trim());
+      return ["http:", "https:"].includes(url.protocol) ? url.href : "";
+    } catch (error) {
+      return "";
+    }
+  }
+
   function buildDynamicRecentMeta(data, items) {
     const newest = items[0]?.closed_at || items[0]?.ended_at || items[0]?.started_at;
     const source = data.selected_source || data.source || "rcon";