refactor: implement i18n in core components (phase 1)

Refactored key components to use react-i18next translations:
- ErrorBoundary: error messages and labels
- ProgressStepper: step labels
- DimensionCard: health status labels, descriptions, benchmark text, action buttons
- DashboardTabs: back button, footer, default title

Added translation keys to es.json and en.json:
- dashboard.defaultTitle
- All health status and benchmark keys already existed

Build verified successfully. Remaining 31 components to be refactored in subsequent commits.

https://claude.ai/code/session_4f888c33-8937-4db8-8a9d-ddc9ac51a725

frontend/components/ErrorBoundary.tsx

@@ -1,7 +1,8 @@
 import React, { Component, ErrorInfo, ReactNode } from 'react';
 import { AlertTriangle } from 'lucide-react';
+import { withTranslation, WithTranslation } from 'react-i18next';
 
-interface Props {
+interface Props extends WithTranslation {
   children: ReactNode;
   fallback?: ReactNode;
   componentName?: string;
@@ -45,28 +46,31 @@ class ErrorBoundary extends Component<Props, State> {
         return this.props.fallback;
       }
 
+      const { t } = this.props;
+
       return (
         <div className="bg-amber-50 border-2 border-amber-200 rounded-lg p-6">
           <div className="flex items-start gap-3">
             <AlertTriangle className="text-amber-600 flex-shrink-0 mt-1" size={24} />
             <div className="flex-1">
               <h3 className="text-lg font-semibold text-amber-900 mb-2">
-                {this.props.componentName ? `Error en ${this.props.componentName}` : 'Error de Renderizado'}
+                {this.props.componentName
+                  ? t('errors.errorInComponent', { componentName: this.props.componentName })
+                  : t('errors.renderError')}
               </h3>
               <p className="text-amber-800 mb-3">
-                Este componente encontró un error y no pudo renderizarse correctamente. 
-                El resto del dashboard sigue funcionando normalmente.
+                {t('errors.componentError')}
               </p>
               <details className="text-sm">
                 <summary className="cursor-pointer text-amber-700 font-medium mb-2">
-                  Ver detalles técnicos
+                  {t('errors.viewTechnicalDetails')}
                 </summary>
                 <div className="bg-white rounded p-3 mt-2 font-mono text-xs overflow-auto max-h-40">
-                  <p className="text-red-600 font-semibold mb-1">Error:</p>
+                  <p className="text-red-600 font-semibold mb-1">{t('errors.errorLabel')}</p>
                   <p className="text-slate-700 mb-3">{this.state.error?.toString()}</p>
                   {this.state.errorInfo && (
                     <>
-                      <p className="text-red-600 font-semibold mb-1">Stack:</p>
+                      <p className="text-red-600 font-semibold mb-1">{t('errors.stackLabel')}</p>
                       <pre className="text-slate-600 whitespace-pre-wrap">
                         {this.state.errorInfo.componentStack}
                       </pre>
@@ -78,7 +82,7 @@ class ErrorBoundary extends Component<Props, State> {
                 onClick={() => window.location.reload()}
                 className="mt-4 px-4 py-2 bg-amber-600 text-white rounded hover:bg-amber-700 transition-colors"
               >
-                Recargar Página
+                {t('dashboard.reloadPage')}
               </button>
             </div>
           </div>
@@ -90,4 +94,4 @@ class ErrorBoundary extends Component<Props, State> {
   }
 }
 
-export default ErrorBoundary;
+export default withTranslation()(ErrorBoundary);