feat(i18n): improve localization for engineering page metrics and descriptions

Author: mikerb95

src/pages/engineering.astro

@@ -309,36 +309,39 @@ const VITAL_EXPLAIN: Record<VitalMetric, string> = e.vitals.explain
                     </div>
 
                     <div class="flex gap-2 mb-3 h-1.5 rounded-full overflow-hidden">
-                      <div style={`width:${v.dist.good}%`} class="bg-lime/70" title={`${v.dist.good}% bueno`}></div>
-                      <div style={`width:${v.dist.needsImprovement}%`} class="bg-ember/50" title={`${v.dist.needsImprovement}% mejorable`}></div>
-                      <div style={`width:${v.dist.poor}%`} class="bg-ember/80" title={`${v.dist.poor}% pobre`}></div>
+                      <div style={`width:${v.dist.good}%`} class="bg-lime/70" title={`${v.dist.good}% ${e.vitals.good.toLowerCase()}`}></div>
+                      <div style={`width:${v.dist.needsImprovement}%`} class="bg-ember/50" title={`${v.dist.needsImprovement}% ${e.vitals.needsImprovement.toLowerCase()}`}></div>
+                      <div style={`width:${v.dist.poor}%`} class="bg-ember/80" title={`${v.dist.poor}% ${e.vitals.poor.toLowerCase()}`}></div>
                     </div>
                     <div class="text-[11px] text-ink-400 mb-3">
-                      {v.dist.good}% bueno · {v.dist.needsImprovement}% mejorable · {v.dist.poor}% pobre
+                      {v.dist.good}% {e.vitals.good.toLowerCase()} · {v.dist.needsImprovement}% {e.vitals.needsImprovement.toLowerCase()} · {v.dist.poor}% {e.vitals.poor.toLowerCase()}
                     </div>
 
                     {v.trend != null && v.trendDisplay && (
                       <div class="text-[12px] text-ink-300 mb-2">
-                        Últimos 7d: {v.trend < 0 ? '▼' : v.trend > 0 ? '▲' : '='} {v.trendDisplay} vs ventana de 30d
+                        {e.vitals.trendLabel} {v.trend < 0 ? '▼' : v.trend > 0 ? '▲' : '='} {v.trendDisplay} {e.vitals.trendVs}
                         <span class={v.trend < 0 ? 'text-lime' : v.trend > 0 ? 'text-ember' : 'text-ink-400'}>
-                          {' '}({v.trend < 0 ? 'mejora' : v.trend > 0 ? 'empeora' : 'estable'})
+                          {' '}({v.trend < 0 ? e.vitals.trendImproves : v.trend > 0 ? e.vitals.trendWorsens : e.vitals.trendStable})
                         </span>
                       </div>
                     )}
 
                     {v.worstPath && (
                       <div class="text-[12px] text-ink-300">
-                        Ruta más lenta: <span class="font-mono text-ink-100">{v.worstPath.path}</span> ({formatVital(v.metric, v.worstPath.p75)} p75)
+                        {interpolate(e.vitals.worstPath, {
+                          path: v.worstPath.path,
+                          value: formatVital(v.metric, v.worstPath.p75),
+                        }).split(v.worstPath.path).map((part, i) => i === 0 ? <>{part}<span class="font-mono text-ink-100">{v.worstPath!.path}</span></> : part)}
                       </div>
                     )}
                   </>
                 )}
                 <div class="text-[11px] text-ink-500 mt-3 pt-2 border-t border-white/5">
-                  Medido con la librería oficial <span class="font-mono">web-vitals</span> en el navegador de cada visitante. Sin cookies.
+                  {e.vitals.measuredWith}
                 </div>
                 <div class="live-strip flex items-center gap-1.5 text-[11px] font-mono text-ink-400 mt-2" data-live="vitals">
                   <span class="live-dot"></span>
-                  <span class="live-text">Verificando en vivo…</span>
+                  <span class="live-text">{e.pipeline.liveChecking}</span>
                 </div>
               </Fragment>
             </CardPopover>