Refine historical page branding and copy

frontend/assets/css/historico.css

@@ -24,6 +24,18 @@
   gap: 24px;
 }
 
+.historical-hero__layout {
+  display: grid;
+  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
+  align-items: center;
+  gap: 32px;
+}
+
+.historical-logo-frame {
+  width: min(300px, 100%);
+  min-height: 220px;
+}
+
 .historical-hero__title {
   max-width: 12ch;
 }
@@ -228,6 +240,7 @@
 }
 
 @media (max-width: 720px) {
+  .historical-hero__layout,
   .historical-hero__topline,
   .historical-panel__header,
   .historical-match-card__top {
@@ -235,6 +248,10 @@
     align-items: flex-start;
   }
 
+  .historical-hero__layout {
+    display: flex;
+  }
+
   .historical-selector {
     flex-direction: column;
   }

frontend/assets/js/historico.js

@@ -27,7 +27,7 @@ document.addEventListener("DOMContentLoaded", () => {
     syncActiveButtons(selectorButtons, activeServerSlug);
     setRangeBadge(rangeNode, "Cargando rango temporal", false);
     summaryNoteNode.textContent =
-      "Este bloque resume solo la cobertura ya importada en la base local.";
+      "Este bloque resume solo la cobertura ya registrada en la base local.";
     renderSummaryLoading(summaryNode);
     weeklyWindowNoteNode.textContent = "Cargando ventana semanal...";
     setState(weeklyStateNode, "Cargando ranking semanal...");
@@ -81,7 +81,7 @@ function hydrateSummary(result, summaryNode, rangeNode, noteNode) {
     renderSummaryError(summaryNode);
     setRangeBadge(rangeNode, "Resumen historico no disponible", false);
     noteNode.textContent =
-      "No se pudo leer la cobertura importada persistida para este servidor.";
+      "No se pudo leer la cobertura historica registrada para este servidor.";
     return;
   }
 
@@ -91,7 +91,7 @@ function hydrateSummary(result, summaryNode, rangeNode, noteNode) {
     renderSummaryEmpty(summaryNode);
     setRangeBadge(rangeNode, "Sin cobertura historica", false);
     noteNode.textContent =
-      "Todavia no existe cobertura importada suficiente en la base local.";
+      "Todavia no existe cobertura historica suficiente en la base local.";
     return;
   }
 
@@ -101,7 +101,7 @@ function hydrateSummary(result, summaryNode, rangeNode, noteNode) {
   const rangeLabel = buildCoverageBadgeLabel(coverage, timeRange);
   setRangeBadge(
     rangeNode,
-    rangeLabel || "Cobertura importada parcial",
+    rangeLabel || "Cobertura registrada parcial",
     coverage.status === "week-plus",
   );
   noteNode.textContent = buildSummaryNote(
@@ -112,12 +112,12 @@ function hydrateSummary(result, summaryNode, rangeNode, noteNode) {
   summaryNode.innerHTML = [
     renderSummaryCard("Servidor", summary.server?.name || "Servidor no disponible"),
     renderSummaryCard(
-      "Partidas importadas",
+      "Partidas registradas",
       formatNumber(summary.imported_matches_count ?? summary.matches_count),
     ),
     renderSummaryCard("Jugadores unicos", formatNumber(summary.unique_players)),
     renderSummaryCard(
-      "Cobertura importada",
+      "Cobertura registrada",
       formatCoverageDays(coverage.coverage_days),
     ),
     renderSummaryCard("Primera partida", formatTimestamp(coverage.first_match_at)),
@@ -288,7 +288,7 @@ function buildCoverageBadgeLabel(coverage, timeRange) {
     coverage?.last_match_at || timeRange?.end,
   );
   if (coverageDays !== "Cobertura no disponible" && rangeLabel) {
-    return `${coverageDays} importados`;
+    return `${coverageDays} registrados`;
   }
   return rangeLabel;
 }
@@ -296,7 +296,7 @@ function buildCoverageBadgeLabel(coverage, timeRange) {
 function buildSummaryNote(summaryBasis, weeklyWindowDays, coverage) {
   const basisLabel =
     summaryBasis === "persisted-import"
-      ? "la cobertura ya importada en la base local"
+      ? "la cobertura ya registrada en la base local"
       : "el historico persistido disponible";
   const weeklyWindowLabel = Number.isFinite(Number(weeklyWindowDays))
     ? `${weeklyWindowDays} dias`

frontend/historico.html

@@ -22,32 +22,44 @@
             </a>
             <p class="eyebrow">Historico propio</p>
           </div>
-          <div class="historical-hero__copy">
-            <div>
-              <h1 class="historical-hero__title">
-                Registro tactico
-                <span class="hero__title-accent">Comunidad Hispana</span>
-              </h1>
-              <p class="hero__text historical-hero__text">
-                Consulta cobertura importada, ranking semanal y cierres
-                recientes usando solo la capa historica interna del proyecto.
-              </p>
+          <div class="historical-hero__layout">
+            <div class="logo-frame historical-logo-frame">
+              <img
+                src="./assets/img/logo.png"
+                alt="Logo oficial de la comunidad HLL Vietnam"
+                class="logo-frame__image"
+                width="1024"
+                height="1044"
+                decoding="async"
+              />
             </div>
-            <div class="historical-selector" aria-label="Seleccion de servidor">
-              <button
-                class="historical-selector__button is-active"
-                type="button"
-                data-server-slug="comunidad-hispana-01"
-              >
-                Comunidad Hispana #01
-              </button>
-              <button
-                class="historical-selector__button"
-                type="button"
-                data-server-slug="comunidad-hispana-02"
-              >
-                Comunidad Hispana #02
-              </button>
+            <div class="historical-hero__copy">
+              <div>
+                <h1 class="historical-hero__title">
+                  Registro de la
+                  <span class="hero__title-accent">Comunidad Hispana</span>
+                </h1>
+                <p class="hero__text historical-hero__text">
+                  Consulta la cobertura registrada, el ranking semanal y los
+                  cierres recientes usando solo la capa historica interna del proyecto.
+                </p>
+              </div>
+              <div class="historical-selector" aria-label="Seleccion de servidor">
+                <button
+                  class="historical-selector__button is-active"
+                  type="button"
+                  data-server-slug="comunidad-hispana-01"
+                >
+                  Comunidad Hispana #01
+                </button>
+                <button
+                  class="historical-selector__button"
+                  type="button"
+                  data-server-slug="comunidad-hispana-02"
+                >
+                  Comunidad Hispana #02
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -58,10 +70,10 @@
             <div class="panel__shell">
               <div class="panel__header historical-panel__header">
                 <div>
-                  <p class="eyebrow eyebrow--section">Cobertura importada</p>
+                  <p class="eyebrow eyebrow--section">Cobertura registrada</p>
                   <h2 id="historical-summary-title">Resumen del historico persistido</h2>
                   <p class="historical-panel__note" id="historical-summary-note">
-                    Este bloque resume solo la cobertura ya importada en la base local.
+                    Este bloque resume solo la cobertura ya registrada en la base local.
                   </p>
                 </div>
               <p class="status-chip status-chip--fallback" id="historical-range">
@@ -115,7 +127,7 @@
                   <p class="eyebrow eyebrow--section">Partidas recientes</p>
                   <h2 id="recent-matches-title">Ultimos cierres registrados</h2>
                   <p class="historical-panel__note">
-                    Lista de cierres ya importados para el servidor activo.
+                    Lista de cierres ya registrados para el servidor activo.
                   </p>
                 </div>
               </div>