roadmap-kit 1.0.2 → 1.0.3

package/dashboard/src/App.jsx

@@ -400,7 +400,7 @@ const translations = {
       setup: 'SETUP',
       features: 'FEATURES',
       resources: 'RESOURCES',
-      debt: 'DEBT',
+      debt: 'TECH DEBT',
       info: 'INFO',
       settings: 'SETTINGS',
       help: 'HELP'
@@ -514,7 +514,39 @@ const translations = {
       effort: 'Effort',
       source: 'Source',
       bySeverity: 'BY SEVERITY',
-      items: 'items'
+      items: 'items',
+      // Severity levels
+      high: 'HIGH',
+      medium: 'MEDIUM',
+      low: 'LOW',
+      // Status
+      status: 'STATUS',
+      pending: 'PENDING',
+      inProgress: 'IN PROGRESS',
+      resolved: 'RESOLVED',
+      // Actions
+      filter: 'FILTER',
+      all: 'ALL',
+      clear: 'CLEAR',
+      addDebt: 'ADD DEBT',
+      addFirstDebt: 'ADD FIRST DEBT',
+      noMatch: 'NO ITEMS MATCH FILTERS',
+      // Details
+      description: 'DESCRIPTION',
+      impact: 'IMPACT',
+      solution: 'PROPOSED SOLUTION',
+      affectedFiles: 'AFFECTED FILES',
+      feature: 'FEATURE',
+      task: 'TASK',
+      priority: 'PRIORITY',
+      notEstimated: 'Not estimated',
+      // Dates
+      created: 'Created',
+      resolvedAt: 'Resolved',
+      assigned: 'Assigned',
+      due: 'Due',
+      // Schema
+      jsonSchema: 'JSON SCHEMA FOR TECHNICAL DEBT'
     },
     // Info
     info: {
@@ -746,7 +778,7 @@ const translations = {
       setup: 'ASISTENTE',
       features: 'ESTADO',
       resources: 'RECURSOS',
-      debt: 'DEUDA',
+      debt: 'DEUDA TÉCNICA',
       info: 'INFO',
       settings: 'CONFIG',
       help: 'AYUDA'
@@ -860,7 +892,39 @@ const translations = {
       effort: 'Esfuerzo',
       source: 'Origen',
       bySeverity: 'POR SEVERIDAD',
-      items: 'elementos'
+      items: 'elementos',
+      // Niveles de severidad
+      high: 'ALTA',
+      medium: 'MEDIA',
+      low: 'BAJA',
+      // Estado
+      status: 'ESTADO',
+      pending: 'PENDIENTE',
+      inProgress: 'EN PROGRESO',
+      resolved: 'RESUELTO',
+      // Acciones
+      filter: 'FILTRAR',
+      all: 'TODOS',
+      clear: 'LIMPIAR',
+      addDebt: 'AÑADIR DEUDA',
+      addFirstDebt: 'AÑADIR PRIMERA DEUDA',
+      noMatch: 'NINGÚN ELEMENTO COINCIDE CON LOS FILTROS',
+      // Detalles
+      description: 'DESCRIPCIÓN',
+      impact: 'IMPACTO',
+      solution: 'SOLUCIÓN PROPUESTA',
+      affectedFiles: 'ARCHIVOS AFECTADOS',
+      feature: 'CARACTERÍSTICA',
+      task: 'TAREA',
+      priority: 'PRIORIDAD',
+      notEstimated: 'Sin estimar',
+      // Fechas
+      created: 'Creado',
+      resolvedAt: 'Resuelto',
+      assigned: 'Asignado',
+      due: 'Vence',
+      // Schema
+      jsonSchema: 'ESQUEMA JSON PARA DEUDA TÉCNICA'
     },
     // Info
     info: {
@@ -1938,7 +2002,7 @@ function App() {
           )}
           {activeTab === 'metrics' && <MetricsTab roadmap={roadmap} language={language} />}
           {activeTab === 'resources' && <ResourcesTab resources={projectInfo.shared_resources || {}} />}
-          {activeTab === 'debt' && <DebtTab roadmap={roadmap} setRoadmap={setRoadmap} setHasChanges={setHasChanges} />}
+          {activeTab === 'debt' && <DebtTab roadmap={roadmap} setRoadmap={setRoadmap} setHasChanges={setHasChanges} t={t} />}
           {activeTab === 'info' && <InfoTab projectInfo={projectInfo} />}
           {activeTab === 'settings' && <SettingsTab roadmap={roadmap} setRoadmap={setRoadmap} setHasChanges={setHasChanges} authState={authState} showConfirm={showConfirm} showAlert={showAlert} t={t} language={language} changeLanguage={changeLanguage} />}
           {activeTab === 'help' && <HelpTab t={t} language={language} />}
@@ -3448,7 +3512,7 @@ function ResourcesTab({ resources }) {
 }
 
 // ============ DEBT TAB ============
-function DebtTab({ roadmap, setRoadmap, setHasChanges }) {
+function DebtTab({ roadmap, setRoadmap, setHasChanges, t }) {
   const [expandedDebt, setExpandedDebt] = useState(null);
   const [filterSeverity, setFilterSeverity] = useState('all');
   const [filterStatus, setFilterStatus] = useState('all');
@@ -3492,9 +3556,9 @@ function DebtTab({ roadmap, setRoadmap, setHasChanges }) {
   });
 
   const statusConfig = {
-    pending: { led: 'led-gray', label: 'PENDING', color: 'text-gray-500' },
-    in_progress: { led: 'theme-led theme-led-warning', label: 'IN PROGRESS', color: 'text-signal' },
-    resolved: { led: 'theme-led theme-led-success', label: 'RESOLVED', color: 'text-matrix' }
+    pending: { led: 'led-gray', label: t('debt.pending'), color: 'text-gray-500' },
+    in_progress: { led: 'theme-led theme-led-warning', label: t('debt.inProgress'), color: 'text-signal' },
+    resolved: { led: 'theme-led theme-led-success', label: t('debt.resolved'), color: 'text-matrix' }
   };
 
   // Update debt status
@@ -3578,7 +3642,7 @@ function DebtTab({ roadmap, setRoadmap, setHasChanges }) {
 
   return (
     <div className="space-y-6 animate-fade-in">
-      {/* Summary */}
+      {/* Resumen */}
       <div className="grid grid-cols-3 gap-4">
         <button
           onClick={() => setFilterSeverity(filterSeverity === 'high' ? 'all' : 'high')}
@@ -3586,7 +3650,7 @@ function DebtTab({ roadmap, setRoadmap, setHasChanges }) {
         >
           <div className="flex items-center gap-3 mb-3">
             <div className="led theme-led theme-led-danger" />
-            <span className="font-mono text-[10px] text-gray-500 tracking-wider">HIGH</span>
+            <span className="font-mono text-[10px] text-gray-500 tracking-wider">{t('debt.high')}</span>
           </div>
           <div className="metric-display text-3xl text-alert">{bySeverity.high.length}</div>
         </button>
@@ -3596,7 +3660,7 @@ function DebtTab({ roadmap, setRoadmap, setHasChanges }) {
         >
           <div className="flex items-center gap-3 mb-3">
             <div className="led theme-led theme-led-warning" />
-            <span className="font-mono text-[10px] text-gray-500 tracking-wider">MEDIUM</span>
+            <span className="font-mono text-[10px] text-gray-500 tracking-wider">{t('debt.medium')}</span>
           </div>
           <div className="metric-display text-3xl text-signal">{bySeverity.medium.length}</div>
         </button>
@@ -3606,42 +3670,42 @@ function DebtTab({ roadmap, setRoadmap, setHasChanges }) {
         >
           <div className="flex items-center gap-3 mb-3">
             <div className="led theme-led theme-led-success" />
-            <span className="font-mono text-[10px] text-gray-500 tracking-wider">LOW</span>
+            <span className="font-mono text-[10px] text-gray-500 tracking-wider">{t('debt.low')}</span>
           </div>
           <div className="metric-display text-3xl text-cyber">{bySeverity.low.length}</div>
         </button>
       </div>
 
-      {/* Filters & Add Button */}
+      {/* Filtros y Botón Añadir */}
       <div className="flex items-center gap-3 flex-wrap">
-        <span className="font-mono text-[10px] text-gray-600">FILTER:</span>
+        <span className="font-mono text-[10px] text-gray-600">{t('debt.filter')}:</span>
         <select
           value={filterStatus}
           onChange={(e) => setFilterStatus(e.target.value)}
           className="theme-input px-3 py-2 text-xs"
         >
-          <option value="all">ALL STATUS</option>
-          <option value="pending">PENDING</option>
-          <option value="in_progress">IN PROGRESS</option>
-          <option value="resolved">RESOLVED</option>
+          <option value="all">{t('debt.all')}</option>
+          <option value="pending">{t('debt.pending')}</option>
+          <option value="in_progress">{t('debt.inProgress')}</option>
+          <option value="resolved">{t('debt.resolved')}</option>
         </select>
         {(filterSeverity !== 'all' || filterStatus !== 'all') && (
           <button
             onClick={() => { setFilterSeverity('all'); setFilterStatus('all'); }}
             className="font-mono text-[10px] text-gray-500 hover:text-white transition-all"
           >
-            CLEAR
+            {t('debt.clear')}
           </button>
         )}
         <span className="font-mono text-[10px] text-gray-600">
-          {filteredDebts.length} / {allDebts.length} items
+          {filteredDebts.length} / {allDebts.length} {t('debt.items')}
         </span>
         <button
           onClick={() => setShowAddDebt(true)}
           className="ml-auto theme-btn-primary flex items-center gap-2"
         >
           <Plus className="w-4 h-4" />
-          ADD DEBT
+          {t('debt.addDebt')}
         </button>
       </div>
 
@@ -3658,7 +3722,7 @@ function DebtTab({ roadmap, setRoadmap, setHasChanges }) {
       {/* Debt Items */}
       {filteredDebts.length > 0 ? (
         <div className="theme-card p-5">
-          <h3 className="font-mono text-sm text-signal tracking-wider mb-4"># TECHNICAL_DEBT</h3>
+          <h3 className="font-mono text-sm text-signal tracking-wider mb-4"># {t('debt.title')}</h3>
           <div className="space-y-2">
             {filteredDebts.map((debt) => {
               const isExpanded = expandedDebt === debt.id;
@@ -3707,9 +3771,9 @@ function DebtTab({ roadmap, setRoadmap, setHasChanges }) {
                   {/* Expanded Content */}
                   {isExpanded && !isEditing && (
                     <div className="px-4 pb-4 pt-2 border-t border-white/5 space-y-4 animate-fade-in">
-                      {/* Status Controls */}
+                      {/* Controles de Estado */}
                       <div className="flex items-center gap-2 p-3 bg-black/30 border border-white/5">
-                        <span className="font-mono text-[10px] text-gray-600">STATUS:</span>
+                        <span className="font-mono text-[10px] text-gray-600">{t('debt.status')}:</span>
                         <div className="flex gap-1">
                           {['pending', 'in_progress', 'resolved'].map((s) => {
                             const cfg = statusConfig[s];
@@ -3746,36 +3810,36 @@ function DebtTab({ roadmap, setRoadmap, setHasChanges }) {
                         </div>
                       </div>
 
-                      {/* Full Description */}
+                      {/* Descripción Completa */}
                       <div>
-                        <h5 className="font-mono text-[10px] text-gray-600 tracking-wider mb-2"># DESCRIPTION</h5>
+                        <h5 className="font-mono text-[10px] text-gray-600 tracking-wider mb-2"># {t('debt.description')}</h5>
                         <p className="font-mono text-xs text-gray-400">{debt.description}</p>
                       </div>
 
-                      {/* Impact */}
+                      {/* Impacto */}
                       {debt.impact && (
                         <div className="p-3 border border-alert/20 bg-alert/5">
                           <h5 className="font-mono text-[10px] text-alert tracking-wider mb-2 flex items-center gap-2">
-                            <AlertTriangle className="w-3 h-3" /> IMPACT
+                            <AlertTriangle className="w-3 h-3" /> {t('debt.impact')}
                           </h5>
                           <p className="font-mono text-xs text-gray-400">{debt.impact}</p>
                         </div>
                       )}
 
-                      {/* Solution */}
+                      {/* Solución */}
                       {debt.solution && (
                         <div className="p-3 border border-matrix/20 bg-matrix/5">
                           <h5 className="font-mono text-[10px] text-matrix tracking-wider mb-2 flex items-center gap-2">
-                            <Wrench className="w-3 h-3" /> PROPOSED SOLUTION
+                            <Wrench className="w-3 h-3" /> {t('debt.solution')}
                           </h5>
                           <p className="font-mono text-xs text-gray-400">{debt.solution}</p>
                         </div>
                       )}
 
-                      {/* Affected Files */}
+                      {/* Archivos Afectados */}
                       {debt.affected_files && debt.affected_files.length > 0 && (
                         <div>
-                          <h5 className="font-mono text-[10px] text-gray-600 tracking-wider mb-2"># AFFECTED FILES</h5>
+                          <h5 className="font-mono text-[10px] text-gray-600 tracking-wider mb-2"># {t('debt.affectedFiles')}</h5>
                           <div className="flex flex-wrap gap-2">
                             {debt.affected_files.map((file, idx) => (
                               <code key={idx} className="font-mono text-[11px] px-2 py-1 bg-black/50 border border-white/10 text-cyber">
@@ -3789,19 +3853,19 @@ function DebtTab({ roadmap, setRoadmap, setHasChanges }) {
                       {/* Metadata Grid */}
                       <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
                         <div className="bg-black/30 p-3 border border-white/5">
-                          <div className="font-mono text-[9px] text-gray-600 tracking-wider mb-1">FEATURE</div>
+                          <div className="font-mono text-[9px] text-gray-600 tracking-wider mb-1">{t('debt.feature')}</div>
                           <div className="font-mono text-xs text-white truncate">{debt.featureName}</div>
                         </div>
                         <div className="bg-black/30 p-3 border border-white/5">
-                          <div className="font-mono text-[9px] text-gray-600 tracking-wider mb-1">TASK</div>
+                          <div className="font-mono text-[9px] text-gray-600 tracking-wider mb-1">{t('debt.task')}</div>
                           <div className="font-mono text-xs text-white truncate">{debt.taskName}</div>
                         </div>
                         <div className="bg-black/30 p-3 border border-white/5">
-                          <div className="font-mono text-[9px] text-gray-600 tracking-wider mb-1">EFFORT</div>
-                          <div className="font-mono text-xs text-signal">{debt.estimated_effort || 'Not estimated'}</div>
+                          <div className="font-mono text-[9px] text-gray-600 tracking-wider mb-1">{t('debt.effort')}</div>
+                          <div className="font-mono text-xs text-signal">{debt.estimated_effort || t('debt.notEstimated')}</div>
                         </div>
                         <div className="bg-black/30 p-3 border border-white/5">
-                          <div className="font-mono text-[9px] text-gray-600 tracking-wider mb-1">PRIORITY</div>
+                          <div className="font-mono text-[9px] text-gray-600 tracking-wider mb-1">{t('debt.priority')}</div>
                           <div className={`font-mono text-xs ${
                             debt.priority === 'critical' ? 'text-alert' :
                             debt.priority === 'high' ? 'text-signal' :
@@ -3813,16 +3877,16 @@ function DebtTab({ roadmap, setRoadmap, setHasChanges }) {
                       {/* Additional Info */}
                       <div className="flex items-center gap-4 pt-3 border-t border-white/5 font-mono text-[10px] text-gray-600 flex-wrap">
                         {debt.created_at && (
-                          <span>Created: {new Date(debt.created_at).toLocaleDateString()}</span>
+                          <span>{t('debt.created')}: {new Date(debt.created_at).toLocaleDateString()}</span>
                         )}
                         {debt.resolved_at && (
-                          <span className="text-matrix">Resolved: {new Date(debt.resolved_at).toLocaleDateString()}</span>
+                          <span className="text-matrix">{t('debt.resolvedAt')}: {new Date(debt.resolved_at).toLocaleDateString()}</span>
                         )}
                         {debt.assigned_to && (
-                          <span className="text-signal">Assigned: @{debt.assigned_to}</span>
+                          <span className="text-signal">{t('debt.assigned')}: @{debt.assigned_to}</span>
                         )}
                         {debt.due_date && (
-                          <span className="text-alert">Due: {new Date(debt.due_date).toLocaleDateString()}</span>
+                          <span className="text-alert">{t('debt.due')}: {new Date(debt.due_date).toLocaleDateString()}</span>
                         )}
                       </div>
 
@@ -3861,7 +3925,7 @@ function DebtTab({ roadmap, setRoadmap, setHasChanges }) {
         <div className="theme-card p-12 text-center">
           <CheckCircle2 className="w-10 h-10 mx-auto mb-4 text-matrix" />
           <p className="font-mono text-sm text-gray-600">
-            {allDebts.length === 0 ? 'NO TECHNICAL DEBT REGISTERED' : 'NO ITEMS MATCH FILTERS'}
+            {allDebts.length === 0 ? t('debt.noDebt') : t('debt.noMatch')}
           </p>
           {allDebts.length === 0 && (
             <button
@@ -3869,7 +3933,7 @@ function DebtTab({ roadmap, setRoadmap, setHasChanges }) {
               className="theme-btn-primary mt-4 inline-flex items-center gap-2"
             >
               <Plus className="w-4 h-4" />
-              ADD FIRST DEBT
+              {t('debt.addFirstDebt')}
             </button>
           )}
         </div>
@@ -3879,7 +3943,7 @@ function DebtTab({ roadmap, setRoadmap, setHasChanges }) {
       <div className="theme-card p-4">
         <details>
           <summary className="font-mono text-[10px] text-gray-600 cursor-pointer hover:text-white">
-            JSON SCHEMA FOR TECHNICAL DEBT
+            {t('debt.jsonSchema')}
           </summary>
           <pre className="mt-4 p-4 bg-void-100 border border-white/5 font-mono text-[10px] text-gray-500 overflow-x-auto">
 {`{

package/dashboard/src/components/SharedResources.jsx

@@ -17,9 +17,9 @@ export default function SharedResources({ resources = {} }) {
   if (total === 0) {
     return (
       <div className="card-dark rounded-2xl p-12 text-center">
-        <Package className="w-12 h-12 mx-auto mb-4 text-gray-600" />
-        <h3 className="text-lg font-semibold text-gray-400 mb-2">Sin recursos compartidos</h3>
-        <p className="text-gray-500 text-sm">Agrega componentes en roadmap.json</p>
+        <Package className="w-12 h-12 mx-auto mb-4 text-theme-muted" />
+        <h3 className="text-lg font-semibold text-theme-secondary mb-2">Sin recursos compartidos</h3>
+        <p className="text-theme-muted text-sm">Agrega componentes en roadmap.json</p>
       </div>
     );
   }
@@ -118,7 +118,7 @@ function StatCard({ icon: Icon, label, value, gradient }) {
     <div className="card-dark rounded-2xl p-5 hover:scale-[1.02] transition-all">
       <div className="flex items-center justify-between">
         <div>
-          <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">{label}</p>
+          <p className="text-xs text-theme-muted uppercase tracking-wider mb-1">{label}</p>
           <p className={`text-3xl font-bold bg-gradient-to-r ${gradient} bg-clip-text text-transparent`}>{value}</p>
         </div>
         <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${gradient} flex items-center justify-center opacity-80`}>
@@ -146,9 +146,9 @@ function Section({ title, icon: Icon, color, isOpen, onToggle, children }) {
           <Icon className={`w-5 h-5 ${colors[color]}`} />
           <h3 className={`text-lg font-semibold ${colors[color]}`}>{title}</h3>
         </div>
-        <ChevronDown className={`w-5 h-5 text-gray-500 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+        <ChevronDown className={`w-5 h-5 text-theme-muted transition-transform ${isOpen ? 'rotate-180' : ''}`} />
       </button>
-      {isOpen && <div className="px-6 pb-6 pt-2 border-t border-white/5">{children}</div>}
+      {isOpen && <div className="px-6 pb-6 pt-2 border-t border-theme">{children}</div>}
     </div>
   );
 }
@@ -169,16 +169,16 @@ function ResourceItem({ path, description, usage, exports, warning, color, copyI
         <FileCode className={`w-4 h-4 flex-shrink-0 ${colors[color].split(' ')[0]}`} />
         <div className="flex-1 min-w-0">
           <code className={`text-sm ${colors[color].split(' ')[0]}`}>{path}</code>
-          <p className="text-xs text-gray-500 truncate mt-0.5">{description}</p>
+          <p className="text-xs text-theme-muted truncate mt-0.5">{description}</p>
         </div>
-        <ChevronDown className={`w-4 h-4 text-gray-500 transition-transform ${open ? 'rotate-180' : ''}`} />
+        <ChevronDown className={`w-4 h-4 text-theme-muted transition-transform ${open ? 'rotate-180' : ''}`} />
       </button>
 
       {open && (
-        <div className="px-4 pb-4 pt-2 border-t border-white/5 space-y-3 animate-fade-in">
+        <div className="px-4 pb-4 pt-2 border-t border-theme space-y-3 animate-fade-in">
           {exports?.length > 0 && (
             <div>
-              <span className="text-[10px] text-gray-500 uppercase tracking-wider">Exports:</span>
+              <span className="text-[10px] text-theme-muted uppercase tracking-wider">Exports:</span>
               <div className="flex flex-wrap gap-1.5 mt-1.5">
                 {exports.map((e, i) => (
                   <span key={i} className="px-2 py-1 text-xs bg-white/5 text-blue-400 rounded border border-blue-500/20">{e}</span>
@@ -189,12 +189,12 @@ function ResourceItem({ path, description, usage, exports, warning, color, copyI
           {usage && (
             <div>
               <div className="flex items-center justify-between mb-1.5">
-                <span className="text-[10px] text-gray-500 uppercase tracking-wider">Uso:</span>
+                <span className="text-[10px] text-theme-muted uppercase tracking-wider">Uso:</span>
                 <button onClick={() => onCopy(usage, copyId)} className="text-xs text-blue-400 hover:text-blue-300 flex items-center gap-1">
                   {copiedItem === copyId ? <><Check className="w-3 h-3" /> Copiado</> : <><Copy className="w-3 h-3" /> Copiar</>}
                 </button>
               </div>
-              <div className="bg-white/5 rounded-lg p-3 border border-white/5">
+              <div className="bg-white/5 rounded-lg p-3 border border-theme">
                 <code className="text-sm text-blue-400">{usage}</code>
               </div>
             </div>
@@ -220,16 +220,16 @@ function TableCard({ table, copyId, copiedItem, onCopy }) {
           <code className="text-base font-semibold text-emerald-400">{table.name}</code>
         </div>
         <button onClick={() => onCopy(table.name, copyId)} className="p-1.5 hover:bg-white/5 rounded-lg transition-colors">
-          {copiedItem === copyId ? <Check className="w-3.5 h-3.5 text-emerald-400" /> : <Copy className="w-3.5 h-3.5 text-gray-500" />}
+          {copiedItem === copyId ? <Check className="w-3.5 h-3.5 text-emerald-400" /> : <Copy className="w-3.5 h-3.5 text-theme-muted" />}
         </button>
       </div>
-      <p className="text-sm text-gray-400 mb-3">{table.description}</p>
+      <p className="text-sm text-theme-secondary mb-3">{table.description}</p>
       {table.fields?.length > 0 && (
         <div>
-          <span className="text-[10px] text-gray-500 uppercase tracking-wider">Campos:</span>
+          <span className="text-[10px] text-theme-muted uppercase tracking-wider">Campos:</span>
           <div className="flex flex-wrap gap-1 mt-1.5">
             {table.fields.map((f, i) => (
-              <span key={i} className="text-xs bg-white/5 px-2 py-1 rounded text-gray-300 border border-emerald-500/10">{f}</span>
+              <span key={i} className="text-xs bg-white/5 px-2 py-1 rounded text-theme-secondary border border-emerald-500/10">{f}</span>
             ))}
           </div>
         </div>

package/dashboard/src/components/TechnicalDebt.jsx

@@ -28,11 +28,11 @@ export default function TechnicalDebt({ roadmap = {} }) {
   if (allDebts.length === 0) {
     return (
       <div className="card-dark rounded-2xl p-12 text-center">
-        <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-emerald-500/10 flex items-center justify-center">
-          <TrendingDown className="w-8 h-8 text-emerald-400" />
+        <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-matrix/10 flex items-center justify-center">
+          <TrendingDown className="w-8 h-8 text-matrix" />
         </div>
-        <h3 className="text-lg font-semibold text-emerald-400 mb-2">Sin deuda tecnica</h3>
-        <p className="text-gray-500 text-sm">No hay deuda tecnica registrada</p>
+        <h3 className="text-lg font-semibold text-matrix mb-2">Sin deuda técnica</h3>
+        <p className="text-theme-secondary text-sm">No hay deuda técnica registrada</p>
       </div>
     );
   }
@@ -49,7 +49,7 @@ export default function TechnicalDebt({ roadmap = {} }) {
 
       {/* Distribution Bar */}
       <div className="card-dark rounded-2xl p-6">
-        <h3 className="text-sm text-gray-500 uppercase tracking-wider mb-4">Distribucion</h3>
+        <h3 className="text-sm text-theme-secondary uppercase tracking-wider mb-4">Distribución</h3>
         <div className="flex h-4 rounded-full overflow-hidden bg-white/5">
           {grouped.high.length > 0 && (
             <div
@@ -92,7 +92,7 @@ function StatCard({ label, value, gradient, icon: Icon }) {
     <div className="card-dark rounded-2xl p-5 hover:scale-[1.02] transition-all">
       <div className="flex items-center justify-between">
         <div>
-          <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">{label}</p>
+          <p className="text-xs text-theme-muted uppercase tracking-wider mb-1">{label}</p>
           <p className={`text-3xl font-bold bg-gradient-to-r ${gradient} bg-clip-text text-transparent`}>{value}</p>
         </div>
         <Icon className={`w-8 h-8 opacity-50 bg-gradient-to-r ${gradient} bg-clip-text`} style={{ color: 'currentColor' }} />
@@ -105,6 +105,7 @@ function DebtSection({ severity, debts }) {
   const config = {
     high: {
       title: 'Severidad Alta',
+      label: 'Alta',
       textColor: 'text-rose-400',
       bgColor: 'bg-rose-500/5',
       borderColor: 'border-rose-500/20',
@@ -112,6 +113,7 @@ function DebtSection({ severity, debts }) {
     },
     medium: {
       title: 'Severidad Media',
+      label: 'Media',
       textColor: 'text-amber-400',
       bgColor: 'bg-amber-500/5',
       borderColor: 'border-amber-500/20',
@@ -119,6 +121,7 @@ function DebtSection({ severity, debts }) {
     },
     low: {
       title: 'Severidad Baja',
+      label: 'Baja',
       textColor: 'text-cyan-400',
       bgColor: 'bg-cyan-500/5',
       borderColor: 'border-cyan-500/20',
@@ -149,17 +152,17 @@ function DebtSection({ severity, debts }) {
                 <AlertTriangle className={`w-5 h-5 ${cfg.textColor}`} />
               </div>
               <div className="flex-1 min-w-0">
-                <p className="text-white font-medium mb-2">{debt.description}</p>
+                <p className="text-theme-primary font-medium mb-2">{debt.description}</p>
                 <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm">
-                  <span className="text-gray-500">Feature: <span className="text-blue-400">{debt.featureName}</span></span>
-                  <span className="text-gray-500">Tarea: <span className="text-cyan-400">{debt.taskName}</span></span>
-                  <span className="flex items-center gap-1 text-gray-500">
+                  <span className="text-theme-muted">Característica: <span className="text-cyber">{debt.featureName}</span></span>
+                  <span className="text-theme-muted">Tarea: <span className="text-cyber">{debt.taskName}</span></span>
+                  <span className="flex items-center gap-1 text-theme-muted">
                     <Clock className="w-3.5 h-3.5" /> {debt.estimated_effort}
                   </span>
                 </div>
               </div>
               <span className={`flex-shrink-0 px-2.5 py-1 text-[10px] font-bold text-white rounded-full uppercase tracking-wider ${cfg.badgeBg}`}>
-                {severity}
+                {cfg.label}
               </span>
             </div>
           </div>