feat: translate final sections of Law10Tab (summary table and data maturity)

Completed Spanish-to-English translation of Law10Tab by:
- Translating summary table headers (Requisito, Estado, Score, Gap, Descripción)
- Translating legend labels (Cumple, Parcial, No Cumple, Sin Datos)
- Translating investment section (Coste de no cumplimiento, etc.)
- Translating DataMaturitySummary title and sections
- Translating all data items (Cobertura temporal 24/7, etc.)
- Translating investment phases (Fase 1, Fase 2)
- Translating totals section

Added new translation keys:
- law10.summaryTable.* (table headers, legend, investment)
- law10.dataMaturity.* (title, sections, items, investment phases)

All Law10Tab sections now fully support English translation.

https://claude.ai/code/session_01GNbnkFoESkRcnPr3bLCYDg

frontend/components/tabs/Law10Tab.tsx

@@ -1217,11 +1217,11 @@ function Law10SummaryRoadmap({
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b border-gray-200 bg-gray-50">
-              <th className="text-left py-3 px-3 font-medium text-gray-600">Requisito</th>
-              <th className="text-left py-3 px-3 font-medium text-gray-600">Descripcion</th>
-              <th className="text-center py-3 px-3 font-medium text-gray-600">Estado</th>
-              <th className="text-center py-3 px-3 font-medium text-gray-600">Score</th>
-              <th className="text-left py-3 px-3 font-medium text-gray-600">Gap</th>
+              <th className="text-left py-3 px-3 font-medium text-gray-600">{t('law10.summaryTable.requirement')}</th>
+              <th className="text-left py-3 px-3 font-medium text-gray-600">{t('law10.summaryTable.description')}</th>
+              <th className="text-center py-3 px-3 font-medium text-gray-600">{t('law10.summaryTable.status')}</th>
+              <th className="text-center py-3 px-3 font-medium text-gray-600">{t('law10.summaryTable.score')}</th>
+              <th className="text-left py-3 px-3 font-medium text-gray-600">{t('law10.summaryTable.gap')}</th>
             </tr>
           </thead>
           <tbody>
@@ -1271,40 +1271,40 @@ function Law10SummaryRoadmap({
       <div className="flex flex-wrap gap-4 mb-6 p-3 bg-gray-50 rounded-lg text-xs">
         <div className="flex items-center gap-2">
           <CheckCircle className="w-4 h-4 text-emerald-500" />
-          <span className="text-gray-600">Cumple: Requisito satisfecho</span>
+          <span className="text-gray-600">{t('law10.summaryTable.legend.complies')}</span>
         </div>
         <div className="flex items-center gap-2">
           <AlertTriangle className="w-4 h-4 text-amber-500" />
-          <span className="text-gray-600">Parcial: Requiere mejoras</span>
+          <span className="text-gray-600">{t('law10.summaryTable.legend.partial')}</span>
         </div>
         <div className="flex items-center gap-2">
           <XCircle className="w-4 h-4 text-red-500" />
-          <span className="text-gray-600">No Cumple: Accion urgente</span>
+          <span className="text-gray-600">{t('law10.summaryTable.legend.notComply')}</span>
         </div>
         <div className="flex items-center gap-2">
           <HelpCircle className="w-4 h-4 text-gray-400" />
-          <span className="text-gray-600">Sin Datos: Campos no disponibles en CSV</span>
+          <span className="text-gray-600">{t('law10.summaryTable.legend.noData')}</span>
         </div>
       </div>
 
       {/* Inversion Estimada */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 bg-gray-50 rounded-lg">
         <div className="text-center">
-          <p className="text-xs text-gray-500 mb-1">Coste de no cumplimiento</p>
-          <p className="text-xl font-bold text-red-600">Hasta 100K</p>
-          <p className="text-xs text-gray-400">Multas potenciales/infraccion</p>
+          <p className="text-xs text-gray-500 mb-1">{t('law10.summaryTable.investment.nonComplianceCost')}</p>
+          <p className="text-xl font-bold text-red-600">{t('law10.summaryTable.investment.upTo100k')}</p>
+          <p className="text-xs text-gray-400">{t('law10.summaryTable.investment.potentialFines')}</p>
         </div>
         <div className="text-center">
-          <p className="text-xs text-gray-500 mb-1">Inversion recomendada</p>
+          <p className="text-xs text-gray-500 mb-1">{t('law10.summaryTable.investment.recommendedInvestment')}</p>
           <p className="text-xl font-bold text-blue-600">{formatCurrency(estimatedInvestment())}</p>
-          <p className="text-xs text-gray-400">Basada en tu operacion</p>
+          <p className="text-xs text-gray-400">{t('law10.summaryTable.investment.basedOnOperation')}</p>
         </div>
         <div className="text-center">
-          <p className="text-xs text-gray-500 mb-1">ROI de cumplimiento</p>
+          <p className="text-xs text-gray-500 mb-1">{t('law10.summaryTable.investment.complianceRoi')}</p>
           <p className="text-xl font-bold text-emerald-600">
             {data.economicModel?.roi3yr ? `${Math.round(data.economicModel.roi3yr / 2)}%` : 'Alto'}
           </p>
-          <p className="text-xs text-gray-400">Evitar sanciones + mejora CX</p>
+          <p className="text-xs text-gray-400">{t('law10.summaryTable.investment.avoidSanctions')}</p>
         </div>
       </div>
     </Card>
@@ -1313,29 +1313,31 @@ function Law10SummaryRoadmap({
 
 // Seccion: Resumen de Madurez de Datos
 function DataMaturitySummary({ data }: { data: AnalysisData }) {
+  const { t } = useTranslation();
+
   // Usar datos economicos reales cuando esten disponibles
   const currentAnnualCost = data.economicModel?.currentAnnualCost || 0;
   const annualSavings = data.economicModel?.annualSavings || 0;
   // Datos disponibles
   const availableData = [
-    { name: 'Cobertura temporal 24/7', article: 'Art. 14' },
-    { name: 'Distribucion geografica', article: 'Art. 15 parcial' },
-    { name: 'Calidad resolucion proxy', article: 'Art. 17 indirecto' },
+    { name: t('law10.dataMaturity.items.coverage247'), article: t('law10.dataMaturity.article', { number: '14' }) },
+    { name: t('law10.dataMaturity.items.geoDistribution'), article: t('law10.dataMaturity.articlePartial', { number: '15' }) },
+    { name: t('law10.dataMaturity.items.resolutionQuality'), article: t('law10.dataMaturity.articleIndirect', { number: '17' }) },
   ];
 
   // Datos estimables
   const estimableData = [
-    { name: 'ASA <3min via proxy abandono', article: 'Art. 8.2', error: '±10%' },
-    { name: 'Lenguas cooficiales via pais', article: 'Art. 15', error: 'sin detalle' },
+    { name: t('law10.dataMaturity.items.asa3min'), article: t('law10.dataMaturity.article', { number: '8.2' }), error: t('law10.dataMaturity.errorMargin', { margin: '10' }) },
+    { name: t('law10.dataMaturity.items.officialLanguages'), article: t('law10.dataMaturity.article', { number: '15' }), error: t('law10.dataMaturity.noDetail') },
   ];
 
   // Datos no disponibles
   const missingData = [
-    { name: 'Tiempo resolucion casos', article: 'Art. 17' },
-    { name: 'Cobros indebidos <5 dias', article: 'Art. 17' },
-    { name: 'Transfer a supervisor', article: 'Art. 8' },
-    { name: 'Info incidencias <2h', article: 'Art. 17' },
-    { name: 'Auditoria ENAC', article: 'Art. 22', note: 'requiere contratacion externa' },
+    { name: t('law10.dataMaturity.items.caseResolutionTime'), article: t('law10.dataMaturity.article', { number: '17' }) },
+    { name: t('law10.dataMaturity.items.undueBilling'), article: t('law10.dataMaturity.article', { number: '17' }) },
+    { name: t('law10.dataMaturity.items.supervisorTransfer'), article: t('law10.dataMaturity.article', { number: '8' }) },
+    { name: t('law10.dataMaturity.items.incidentInfo'), article: t('law10.dataMaturity.article', { number: '17' }) },
+    { name: t('law10.dataMaturity.items.enacAudit'), article: t('law10.dataMaturity.article', { number: '22' }), note: t('law10.dataMaturity.items.externalContractRequired') },
   ];
 
   return (
@@ -1344,17 +1346,17 @@ function DataMaturitySummary({ data }: { data: AnalysisData }) {
         <div className="p-2 bg-indigo-100 rounded-lg">
           <TrendingUp className="w-5 h-5 text-indigo-600" />
         </div>
-        <h3 className="font-semibold text-gray-900 text-lg">Resumen: Madurez de Datos para Compliance</h3>
+        <h3 className="font-semibold text-gray-900 text-lg">{t('law10.dataMaturity.title')}</h3>
       </div>
 
-      <p className="text-sm text-gray-600 mb-4">Tu nivel actual de instrumentacion:</p>
+      <p className="text-sm text-gray-600 mb-4">{t('law10.dataMaturity.currentLevel')}</p>
 
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
         {/* Datos disponibles */}
         <div className="p-4 bg-emerald-50 border border-emerald-200 rounded-lg">
           <div className="flex items-center gap-2 mb-3">
             <CheckCircle className="w-5 h-5 text-emerald-600" />
-            <p className="font-semibold text-emerald-800">DATOS DISPONIBLES (3/10)</p>
+            <p className="font-semibold text-emerald-800">{t('law10.dataMaturity.availableData')}</p>
           </div>
           <ul className="space-y-2 text-sm">
             {availableData.map((item, idx) => (
@@ -1370,7 +1372,7 @@ function DataMaturitySummary({ data }: { data: AnalysisData }) {
         <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg">
           <div className="flex items-center gap-2 mb-3">
             <AlertTriangle className="w-5 h-5 text-amber-600" />
-            <p className="font-semibold text-amber-800">DATOS ESTIMABLES (2/10)</p>
+            <p className="font-semibold text-amber-800">{t('law10.dataMaturity.estimableData')}</p>
           </div>
           <ul className="space-y-2 text-sm">
             {estimableData.map((item, idx) => (
@@ -1386,7 +1388,7 @@ function DataMaturitySummary({ data }: { data: AnalysisData }) {
         <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
           <div className="flex items-center gap-2 mb-3">
             <XCircle className="w-5 h-5 text-red-600" />
-            <p className="font-semibold text-red-800">NO DISPONIBLES (5/10)</p>
+            <p className="font-semibold text-red-800">{t('law10.dataMaturity.unavailableData')}</p>
           </div>
           <ul className="space-y-2 text-sm">
             {missingData.map((item, idx) => (
@@ -1406,28 +1408,28 @@ function DataMaturitySummary({ data }: { data: AnalysisData }) {
       <div className="p-4 bg-gray-50 rounded-lg">
         <div className="flex items-center gap-2 mb-4">
           <Lightbulb className="w-5 h-5 text-amber-500" />
-          <p className="font-semibold text-gray-800">INVERSION SUGERIDA PARA COMPLIANCE COMPLETO</p>
+          <p className="font-semibold text-gray-800">{t('law10.dataMaturity.investment.title')}</p>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
           {/* Fase 1 */}
           <div className="p-3 bg-white rounded border border-gray-200">
-            <p className="font-medium text-gray-800 mb-2">Fase 1 - Instrumentacion (Q1 2026)</p>
+            <p className="font-medium text-gray-800 mb-2">{t('law10.dataMaturity.investment.phase1.title')}</p>
             <ul className="space-y-1 text-sm text-gray-600">
               <li className="flex justify-between">
-                <span>• Tracking ASA real</span>
+                <span>{t('law10.dataMaturity.investment.phase1.realAsaTracking')}</span>
                 <span className="font-semibold">5-8K</span>
               </li>
               <li className="flex justify-between">
-                <span>• Sistema ticketing/casos</span>
+                <span>{t('law10.dataMaturity.investment.phase1.ticketingSystem')}</span>
                 <span className="font-semibold">15-25K</span>
               </li>
               <li className="flex justify-between">
-                <span>• Enriquecimiento lenguas</span>
+                <span>{t('law10.dataMaturity.investment.phase1.languageEnrichment')}</span>
                 <span className="font-semibold">2K</span>
               </li>
               <li className="flex justify-between border-t border-gray-100 pt-1 mt-1">
-                <span className="font-medium">Subtotal:</span>
+                <span className="font-medium">{t('law10.dataMaturity.investment.phase1.subtotal')}</span>
                 <span className="font-bold text-blue-600">22-35K</span>
               </li>
             </ul>
@@ -1435,22 +1437,22 @@ function DataMaturitySummary({ data }: { data: AnalysisData }) {
 
           {/* Fase 2 */}
           <div className="p-3 bg-white rounded border border-gray-200">
-            <p className="font-medium text-gray-800 mb-2">Fase 2 - Operaciones (Q2-Q3 2026)</p>
+            <p className="font-medium text-gray-800 mb-2">{t('law10.dataMaturity.investment.phase2.title')}</p>
             <ul className="space-y-1 text-sm text-gray-600">
               <li className="flex justify-between">
-                <span>• Cobertura 24/7 (chatbot + on-call)</span>
+                <span>{t('law10.dataMaturity.investment.phase2.coverage247')}</span>
                 <span className="font-semibold">65K/año</span>
               </li>
               <li className="flex justify-between">
-                <span>• Copilot IA (reducir AHT)</span>
+                <span>{t('law10.dataMaturity.investment.phase2.aiCopilot')}</span>
                 <span className="font-semibold">35K + 8K/mes</span>
               </li>
               <li className="flex justify-between">
-                <span>• Auditor ENAC</span>
+                <span>{t('law10.dataMaturity.investment.phase2.enacAuditor')}</span>
                 <span className="font-semibold">12-18K/año</span>
               </li>
               <li className="flex justify-between border-t border-gray-100 pt-1 mt-1">
-                <span className="font-medium">Subtotal año 1:</span>
+                <span className="font-medium">{t('law10.dataMaturity.investment.phase2.subtotalYear1')}</span>
                 <span className="font-bold text-blue-600">112-118K</span>
               </li>
             </ul>
@@ -1460,21 +1462,21 @@ function DataMaturitySummary({ data }: { data: AnalysisData }) {
         {/* Totales - usar datos reales cuando disponibles */}
         <div className="grid grid-cols-3 gap-4 pt-4 border-t border-gray-200">
           <div className="text-center">
-            <p className="text-xs text-gray-500 mb-1">Inversion Total</p>
+            <p className="text-xs text-gray-500 mb-1">{t('law10.dataMaturity.investment.totals.totalInvestment')}</p>
             <p className="text-xl font-bold text-blue-600">
               {currentAnnualCost > 0 ? formatCurrency(Math.round(currentAnnualCost * 0.05)) : '134-153K'}
             </p>
-            <p className="text-xs text-gray-400">~5% coste anual</p>
+            <p className="text-xs text-gray-400">{t('law10.dataMaturity.investment.totals.percentAnnualCost')}</p>
           </div>
           <div className="text-center">
-            <p className="text-xs text-gray-500 mb-1">Riesgo Evitado</p>
+            <p className="text-xs text-gray-500 mb-1">{t('law10.dataMaturity.investment.totals.riskAvoided')}</p>
             <p className="text-xl font-bold text-red-600">
               {currentAnnualCost > 0 ? formatCurrency(Math.min(1000000, currentAnnualCost * 0.3)) : '750K-1M'}
             </p>
-            <p className="text-xs text-gray-400">sanciones potenciales</p>
+            <p className="text-xs text-gray-400">{t('law10.dataMaturity.investment.totals.potentialSanctions')}</p>
           </div>
           <div className="text-center">
-            <p className="text-xs text-gray-500 mb-1">ROI Compliance</p>
+            <p className="text-xs text-gray-500 mb-1">{t('law10.dataMaturity.investment.totals.complianceRoi')}</p>
             <p className="text-xl font-bold text-emerald-600">
               {data.economicModel?.roi3yr ? `${data.economicModel.roi3yr}%` : '490-650%'}
             </p>