diff --git a/frontend/src/components/GestionComponentes.tsx b/frontend/src/components/GestionComponentes.tsx
index 95636bc..6cf37eb 100644
--- a/frontend/src/components/GestionComponentes.tsx
+++ b/frontend/src/components/GestionComponentes.tsx
@@ -250,7 +250,8 @@ const GestionComponentes = () => {
           <div className={styles.modal}>
             <h3>Unificar Valor</h3>
             <p>Se reemplazarán todas las instancias de:</p>
-            <strong style={{ display: 'block', marginBottom: '1rem', background: '#e9ecef', padding: '8px', borderRadius: '4px' }}>{valorAntiguo}</strong>
+            <strong className={styles.highlightBox}>{valorAntiguo}</strong>
+
             <label>Por el nuevo valor:</label>
             <input type="text" value={valorNuevo} onChange={e => setValorNuevo(e.target.value)} className={styles.modalInput} />
             <div className={styles.modalActions}>
diff --git a/frontend/src/components/SimpleTable.module.css b/frontend/src/components/SimpleTable.module.css
index 8c8f351..3d124a6 100644
--- a/frontend/src/components/SimpleTable.module.css
+++ b/frontend/src/components/SimpleTable.module.css
@@ -767,3 +767,15 @@
   width: 1%;
   white-space: nowrap;
 }
+
+/* --- MODAL DE UNIFICAR --- */
+
+.highlightBox {
+  display: block;
+  margin-bottom: 1rem;
+  padding: 8px;
+  border-radius: 4px;
+  background-color: var(--color-border-subtle);
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border); /* Un borde sutil para definirlo */
+}
\ No newline at end of file