Refine historical page branding and copy

ai/tasks/done/TASK-036-historical-page-branding-and-copy-cleanup.md

@@ -0,0 +1,71 @@
+# TASK-036-historical-page-branding-and-copy-cleanup
+
+## Goal
+Pulir la página histórica propia del proyecto en branding y copy, eliminando formulaciones que suenan técnicas o poco naturales, añadiendo el logo de la comunidad y reforzando la coherencia visual con la landing principal.
+
+## Context
+La página histórica ya es funcional y útil, pero hay varios ajustes de acabado que mejorarían claramente la percepción del producto:
+- eliminar la palabra `táctico` del hero de la página histórica
+- añadir el logo de la comunidad también en esta página
+- sustituir formulaciones con `importado` por textos más naturales como `registrado` o `registradas`
+- mantener la coherencia visual con la landing principal
+
+Estos cambios son de UX/copy/branding y no deben alterar la arquitectura histórica ya construida.
+
+## Steps
+1. Revisar la página histórica actual y su hero.
+2. Eliminar o reformular el texto del hero para quitar la palabra `táctico`.
+3. Añadir el logo de la comunidad en la página histórica usando la ruta de asset local ya establecida por el proyecto.
+4. Revisar todos los textos visibles relacionados con cobertura o datos históricos y sustituir las referencias a:
+   - `importado`
+   - `importada`
+   - `importados`
+   - `importadas`
+   por formulaciones más naturales y adecuadas, preferentemente:
+   - `registrado`
+   - `registrada`
+   - `registrados`
+   - `registradas`
+   o equivalentes mejores si encajan más naturalmente con la UI.
+5. Revisar que los nuevos textos no rompan layout, cards, badges o títulos.
+6. Mantener la estética coherente con la landing y con la identidad actual del proyecto.
+7. No introducir todavía nuevas métricas ni nuevas pestañas en esta task.
+8. Al completar la implementación:
+   - dejar el repositorio consistente
+   - hacer commit
+   - hacer push al remoto si el entorno lo permite
+
+## Files to Read First
+- AGENTS.md
+- frontend/historico.html
+- frontend/assets/css/historico.css
+- frontend/assets/js/historico.js
+- frontend/index.html
+- frontend/assets/css/styles.css
+- ai/repo-context.md
+
+## Expected Files to Modify
+- frontend/historico.html
+- frontend/assets/css/historico.css
+- frontend/assets/js/historico.js
+- opcionalmente frontend/assets/img/logo.png si solo hace falta referenciarlo correctamente, no reemplazarlo
+- opcionalmente documentación mínima si hubiera un cambio visible que merezca reflejarse
+
+## Constraints
+- No cambiar la arquitectura de la página histórica.
+- No crear páginas externas o dependientes de la comunidad.
+- No romper la UI histórica existente.
+- No introducir librerías nuevas.
+- No hacer cambios destructivos.
+- Mantener el trabajo centrado en branding, copy y acabado.
+
+## Validation
+- La palabra `táctico` desaparece del hero histórico.
+- El logo de la comunidad aparece correctamente en la página histórica.
+- Los textos visibles dejan de sonar técnicos o artificiales por el uso de `importado`.
+- La página sigue siendo coherente visualmente con la landing.
+- Los cambios quedan committeados y se hace push al remoto si el entorno lo permite.
+
+## Change Budget
+- Preferir menos de 4 archivos modificados.
+- Preferir menos de 180 líneas cambiadas.

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 class="historical-hero__layout">
-            <div>
+            <div class="logo-frame historical-logo-frame">
-              <h1 class="historical-hero__title">
+              <img
-                Registro tactico
+                src="./assets/img/logo.png"
-                <span class="hero__title-accent">Comunidad Hispana</span>
+                alt="Logo oficial de la comunidad HLL Vietnam"
-              </h1>
+                class="logo-frame__image"
-              <p class="hero__text historical-hero__text">
+                width="1024"
-                Consulta cobertura importada, ranking semanal y cierres
+                height="1044"
-                recientes usando solo la capa historica interna del proyecto.
+                decoding="async"
-              </p>
+              />
             </div>
-            <div class="historical-selector" aria-label="Seleccion de servidor">
+            <div class="historical-hero__copy">
-              <button
+              <div>
-                class="historical-selector__button is-active"
+                <h1 class="historical-hero__title">
-                type="button"
+                  Registro de la
-                data-server-slug="comunidad-hispana-01"
+                  <span class="hero__title-accent">Comunidad Hispana</span>
-              >
+                </h1>
-                Comunidad Hispana #01
+                <p class="hero__text historical-hero__text">
-              </button>
+                  Consulta la cobertura registrada, el ranking semanal y los
-              <button
+                  cierres recientes usando solo la capa historica interna del proyecto.
-                class="historical-selector__button"
+                </p>
-                type="button"
+              </div>
-                data-server-slug="comunidad-hispana-02"
+              <div class="historical-selector" aria-label="Seleccion de servidor">
-              >
+                <button
-                Comunidad Hispana #02
+                  class="historical-selector__button is-active"
-              </button>
+                  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>